实例面向对象的选项卡

<!DOCTYPE html>
<html>
<head>
<meta  charset="utf-8">
<title>diyici</title>
<style>
#div1 input{background:white;}
#div1 input.active{background:yellow;}
#div1 div{width:200px; height:200px; background:#ccc; display:none;}
</style>
<script>
window.onload=function (){
       new TabSwitch('div1');
}

function TabSwitch(id){
    var _this=this;
    var oDiv=document.getElementById(id);

    this.aBtn=oDiv.getElementsByTagName('input');
    this.aDiv=oDiv.getElementsByTagName('div');

    for(var i=0; i<this.aBtn.length;i++){
        this.aBtn[i].index=i;
        this.aBtn[i].onclick=function (){
            _this.fnClick(this);
        };
    }
}
TabSwitch.prototype.fnClick=function (oBtn){
    for(var i=0;i<this.aBtn.length;i++){
        this.aBtn[i].className='';
        this.aDiv[i].style.display='none';
    }
    oBtn.className='active';
    this.aDiv[oBtn.index].style.display='block';
}
</script>
</head>
<body>
        
<div id="div1">
<input class="active" type="button" value="aaa"/>
<input type="button" value="bbb"/>
<input type="button" value="ccc"/>

 <div style="display:block;">aaaaaa</div>
 <div>dsegf</div>
 <div>fergef</div>
</div>

</body>
</html>

之前的贼重要的选项卡

<!DOCTYPE html>
<html>
<head>
<meta  charset="utf-8">
<title>diyici</title>
<style>
#div1 input{background:white;}
#div1 input.active{background:yellow;}
#div1 div{width:200px; height:200px; background:#ccc; display:none;}
</style>
<script>
window.onload=function (){
     var oDiv=document.getElementById('div1');
     var aBtn=oDiv.getElementsByTagName('input');
     var aDiv=oDiv.getElementsByTagName('div');
     for(var i=0;i<aBtn.length;i++){
         aBtn[i].index=i;
         aBtn[i].onclick=function (){
              for(var j=0;j<aBtn.length;j++){
                  aBtn[j].className="";
                  aDiv[j].style.display="none";
              }
              this.className='active';
              aDiv[this.index].style.display='block';
         }
     }
}
</script>
</head>
<body>
        
<div id="div1">
<input class="active" type="button" value="aaa"/>
<input type="button" value="bbb"/>
<input type="button" value="ccc"/>

 <div style="display:block;">aaaaaa</div>
 <div>dsegf</div>
 <div>fergef</div>
</div>

</body>
</html>

实例 面向对象的选项卡

猜你喜欢

实例面向对象的选项卡