本文實例為大家分享了原生js實現tab選項卡切換效果的代碼，供大家參考，具體內容如下
1.html部分
<body> <div id="tab"> <div class="tab_menu"> <ul> <li class="selected"><a href="#">時事</a></li> <li><a href="#">體育</a></li> <li><a href="#">娛樂</a></li> </ul> </div> <div class="tab_box"> <div>時事</div> <div class="hide">體育</div> <div class="hide">娛樂</div> </div> </div> </body>
2.css部分：樣式部分實現方法多種多樣，這是我寫的簡單的demo，我最不擅長的css ><...
.tab_menu .selected{background-color:#aaa;} .tab_menu ul{height:30px;} .tab_menu ul li{float:left;list-style:none;width:50px;height:30px;color:#000;border:solid 1px gray;border-bottom:none; text-align:center;line-height:30px;margin-right:3px;} .tab_menu ul li a{text-decoration:none;} .tab_box{width:170px;height:150px;border:solid 1px gray;} .tab_box .hide{display:none;}3.重要的js部分：
window.onload=function(){ var oTab=document.getElementById('tab'); var aLi=oTab.getElementsByTagName('li'); var oTabBox=oTab.getElementsByTagName('div')[1]; var aBox=oTabBox.getElementsByTagName('div'); for(var i=0;i<aLi.length;i++){ aLi[i].index=i; aLi[i].onclick=function(){ for(var j=0;j<aLi.length;j++){ aLi[j].className='';//取消菜單樣式 aBox[j].className='hide';//隱藏所有的tabDiv } aLi[this.index].className='selected'; aBox[this.index].className=''; } } }
這個簡單粗暴，完全沒有考慮如果tabMenu、tabBox有多個樣式的情況，不適應項目只是一個思路。很多地方需要完善。下面考慮標簽多個class的情況，不過一般都有多個class，現在就要用到去除某個class，添加class的技能了。
3.1原生js中class的添加及刪除。
window.onload=function(){ var oTab=document.getElementById('tab'); var aLi=oTab.getElementsByTagName('li'); var oTabBox=oTab.getElementsByTagName('div')[1]; var aBox=oTabBox.getElementsByTagName('div'); for(var i=0;i<aLi.length;i++){ aLi[i].index=i; aLi[i].onclick=function(){ for(var j=0;j<aLi.length;j++){ var aClass=aLi[j].className.split(' ');//元素.className是一個字符串，切割成數組 var aClass1=aBox[j].className.split(' ');//同樣的方法得到box的 for(var z=0;z<aClass.length;z++){ if(aClass[z]=='selected'){ aClass.splice(z,1);//利用數組的splice方法刪除找到的這個類 } } for(var k=0;k<aClass1.length;k++){ if(aClass1[k]=='hide'){ aClass1.splice(k,1); } } aLi[j].className=aClass.join(' ');//所有的menu都去除selected樣式 aBox[j].className+=' hide';//所有box都隱藏 aBox[this.index].className=aClass1.join(' ');//當前box顯示 aLi[this.index].className+=' selected';//當前menu添加select樣式 } } } } 親測有效，不過都寫在一個方法里有點亂，而且類多的時候效率也是問題，不過類應該不很很多吧==以后再優化吧，這個功能用jquery很簡單。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
