JavaScript实现tab选项卡（多种方式）

JavaScript实现tab选项卡

第一种:通过交替的改变display：none 和display：block

html:

<div id="content">
<div id="tag">
<input class="active" type="button" value="a" />
<input type="button" value="b"  />
<input type="button" value="c"  />
</div>
<div id="zoom">
<div style="display:block;">aaa</div>
<div>bbb</div>
<div>ccc</div>
</div>
</div>

css:

<style type="text/css">
 #content input{ background:white;}
 #content .active{ background:yellow;}
 #content{
     height:223px;
     width:202px;
     border:1px solid green;
     
 }
 #zoom{
     height:200px;
     width:200px;
     border:1px solid red;
     overflow:hidden;
     
 }
 #content #zoom div{
     width:200px;
     height:200px;
     background:#ccc; 
     display:none;
 }
</style>

js:

function show(){
      var btns=document.getElementById("tag").getElementsByTagName("input");
      var divs=document.getElementById("zoom").getElementsByTagName("div");
      var btnslen=btns.length;
      var divslen=divs.length;
      for(var i=0;i<btnslen;i++){  //先循环俺就
          btns[i].index=i; //添加属性表示当前操作的索引滴呀
          btns[i].onclick=function (){
              //先清除原有的样式
              for(var j=0;j<divslen;j++){  //再循环我们的div
                  btns[j].className='';
                  divs[j].style.display='none';  
              }
              this.className='active';
              divs[this.index].style.display='block';
          }
      }
   }
   window.onload=function (){
     show();   
   }

 

第二种：通过改变z-index的方式来改变层之间的关系的呀

html:

<div id="content">
<div id="tag">
<input class="active" type="button" value="a" />
<input type="button" value="b"  />
<input type="button" value="c"  />
</div>
<div id="zoom">
<div  style="display:block; z-index:100;">aaa</div>
<div>bbb</div>
<div>ccc</div>
</div>
</div>

css:

 

#content input{ background:white;}
 #content .active{ background:yellow;}
 #content{
     height:223px;
     width:202px;
     border:1px solid green;
     position:relative;
 }
 #zoom{
     height:200px;
     width:200px;
     border:1px solid red;
     
 }
 #content #zoom div{
     width:200px;
     height:200px;
     background:#ccc; 
     position:absolute;
    
 }

js:

  //前提，不能设置display:none;
   function showByZIndex(){
     //通过z-index 的方法来实现当前属性的设置滴   
      var btns=document.getElementById("tag").getElementsByTagName("input");
      var divs=document.getElementById("zoom").getElementsByTagName("div");
      var btnsLen=btns.length;
      var divsLen=divs.length;
      for(var i=0;i<btnsLen;i++){
          btns[i].index=i;
          btns[i].onclick=function(){
          for(var j=divsLen-1;j>=0;j--){
               //清除所有的buts的样式滴啊
               btns[j].className='';
               //初始化div的z-index熟悉滴呀
               divs[j].style.zIndex=j;  
          }
           this.className='active';
          divs[this.index].style.zIndex=99; //这是为最大滴呀

        }
      }
   }
   window.onload=function (){
     showByZIndex();
   }

最后我们把一种方式进行优化，用面向对象的的方式来实现滴呀!

最终优化代码：

   //其实这样写，不够完美，后期“功力增加”了，我再来进行优化滴哎呀
   function oopStyle(id){
     //面向对象的方式来思考问题呀
     //面向对象就不能再这么写了滴呀,因为你我们要面向content这个对对象滴呀； 这个对象里面包含了tag 和 zoom
     // var btns=document.getElementById("tag").getElementsByTagName("input");
     // var divs=document.getElementById("zoom").getElementsByTagName("div");
     var _this=this;//当前对象，new出来的对象
     this.btns=document.getElementById(id).getElementsByTagName("div")[0].getElementsByTagName("input");
     this.divs=document.getElementById(id).getElementsByTagName("div")[1].getElementsByTagName("div");
     for(var i=0;i<this.btns.length;i++){
          this.btns[i].index=i;
          this.btns[i].onclick=function (){
                var xx=this; //这个this 是当前的按钮；
                _this.fn(this); 
                //调用当前对象的方法，传递点击的这对象戏呀
                //当前对象包含两个属性滴呀（btns,divs）
          }
     }
   }
   oopStyle.prototype.fn=function(obj){
       //这个就不是单指某个div对象，或者btn对象了，是new出来的对象
       //div btn 只能说是他的属性蜡
       //这的this 指的是new 出来的对象的呀
       for(var j=0;j<this.btns.length;j++){
            this.btns[j].className='';
            this.divs[j].style.display='none';   
       }
       obj.className='active';
       this.divs[obj.index].style.display='block';
   }
   window.onload=function (){
      new oopStyle("content");
   }