js實現tab選項卡切換
摘要：
通過原生js實現tab切換，首先講解一下實現的原理。
1.點選按鈕首先給這個被點選的按鈕新增一個active類，給點選的改變背景色
2.點選按鈕其實就是把相應的div給顯示出來。
需要注意的是，點選按鈕，給按鈕添加了一個類和把對應的div給顯示，需要把上一個點選的按鈕顏色還原和上一...
通過原生js實現tab切換，首先講解一下實現的原理。
1.點選按鈕首先給這個被點選的按鈕新增一個active類，給點選的改變背景色
2.點選按鈕其實就是把相應的div給顯示出來。
需要注意的是，點選按鈕，給按鈕添加了一個類和把對應的div給顯示，需要把上一個點選的按鈕顏色還原和上一個按鈕對應的div給隱藏，我是通過點選前，把所有按鈕和div給恢復初始狀態，程式碼如下
1 <html>
2
3 <head>
4 <title></title>
5 </head>
6<style>
7div{
8display:none;
9}
10.active{
11background:yellow;
12}
13</style>
14<script>
15window.onload=function(){
16var aInput=document.getElementsByTagName('input');//獲取到所有的input按鈕,aInput是一個數組
17var aDiv=document.getElementsByTagName('div'); //獲取到所有的div,aDiv是一個數組
18for(var i=0;i<aInput.length;i++){//按鈕陣列
19aInput[i].index=i;//i是按鈕陣列的下標,把i賦值給index,這樣通過index就知道點選的是哪個按鈕
20aInput[i].onclick=function(){
21for(var j=0;j<aInput.length;j++){//通過點選按鈕的時候再次迴圈按鈕，是為了清空active類
22aInput[j].className=''//清空active類
23
24}
25for(var i=0;i<aDiv.length;i++){//把所有的divde的display重新設定為none，就是不顯示
26aDiv[i].style.display='none'
27}
28aInput[this.index].className='active'//點選哪個按鈕就哪個按鈕加active類
29aDiv[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>