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>