js实现tab选项卡切换

　　通过原生js实现tab切换，首先讲解一下实现的原理。

　　　　1.点击按钮首先给这个被点击的按钮添加一个active类，给点击的改变背景色

　　　　2.点击按钮其实就是把相应的div给显示出来。

　　　　需要注意的是，点击按钮，给按钮添加了一个类和把对应的div给显示，需要把上一个点击的按钮颜色还原和上一个按钮对应的div给隐藏，我是通过点击前，把所有按钮和div给恢复初始状　态，代码如下

 1 <html>
 2 
 3 <head>
 4 <title></title>
 5 </head>
 6     <style>
 7         div{
 8             display:none;
 9         }
10         .active{
11             background:yellow;
12         }
13     </style>
14     <script>
15         window.onload=function(){
16             var aInput=document.getElementsByTagName('input');//获取到所有的input按钮,aInput是一个数组
17             var aDiv=document.getElementsByTagName('div'); //获取到所有的div,aDiv是一个数组
18             for(var i=0;i<aInput.length;i++){               //按钮数组
19                 aInput[i].index=i;                          //i是按钮数组的下标,把i赋值给index,这样通过index就知道点击的是哪个按钮
20                 aInput[i].onclick=function(){
21                     for(var j=0;j<aInput.length;j++){      //通过点击按钮的时候再次循环按钮，是为了清空active类
22                         aInput[j].className=''             //清空active类
23                     
24                     }
25                     for(var i=0;i<aDiv.length;i++){        //把所有的divde的display重新设置为none，就是不显示
26                         aDiv[i].style.display='none'
27                     }
28                     aInput[this.index].className='active'  //点击哪个按钮就哪个按钮加active类
29                     aDiv[this.index].style.display='block' //点击哪个按钮就把第几个div给显示出来
30                 }
31             }
32         }
33     </script>
34 <body>
35     <input type="button" id="div1" value="tab1" index="0" />
36     <input type="button" value="tab2" index="1"/>
37     <input type="button" value="tab3" index="2"/>
38     <input type="button" value="tab4" index="3"/>
39     
40     <div style="display:block">显示tab1</div>
41     <div>显示tab2</div>
42     <div>显示tab3</div>
43     <div>显示tab4</div>
44     
45 </body>
46 
47 </html>

js实现tab选项卡切换

猜你喜欢