JavaScript에서 tab 탭 구현(여러 가지 방법)

JavaScript 구현 탭
첫 번째: 교체를 통해 디스플레이: none과 디스플레이: 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");
   }