js實現tab選項卡切換
阿新 • • 發佈：2018-11-11
通過原生js實現tab切換，首先講解一下實現的原理。
1.點選按鈕首先給這個被點選的按鈕新增一個active類，給點選的改變背景色
2.點選按鈕其實就是把相應的div給顯示出來。
需要注意的是，點選按鈕，給按鈕添加了一個類和把對應的div給顯示，需要把上一個點選的按鈕顏色還原和上一個按鈕對應的div給隱藏，我是通過點選前，把所有按鈕和div給恢復初始狀 態，程式碼如下
1 <html> 2 3 <head> 4 <title></title> 5 </head> 6 <style> 7div{ 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 varaDiv=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>