快捷導(dǎo)航

原生js實(shí)現(xiàn)tab選項(xiàng)卡切換

更新時(shí)間：2020年03月23日 10:40:04 作者：奔跑的小溪

這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)tab選項(xiàng)卡，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了原生js實(shí)現(xiàn)tab選項(xiàng)卡切換效果的代碼，供大家參考，具體內(nèi)容如下

1.html部分

<body>
 <div id="tab">
 <div class="tab_menu">
 <ul>
 <li class="selected"><a href="#">時(shí)事</a></li>
 <li><a href="#">體育</a></li>
 <li><a href="#">娛樂</a></li>
 </ul>
 </div>
 <div class="tab_box">
 <div>時(shí)事</div>
 <div class="hide">體育</div>
 <div class="hide">娛樂</div>
 </div>
 </div>
 </body>

2.css部分：樣式部分實(shí)現(xiàn)方法多種多樣，這是我寫的簡單的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='';
 }
 }
 }

這個(gè)簡單粗暴，完全沒有考慮如果tabMenu、tabBox有多個(gè)樣式的情況，不適應(yīng)項(xiàng)目只是一個(gè)思路。很多地方需要完善。下面考慮標(biāo)簽多個(gè)class的情況，不過一般都有多個(gè)class，現(xiàn)在就要用到去除某個(gè)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是一個(gè)字符串，切割成數(shù)組
 var aClass1=aBox[j].className.split(' ');//同樣的方法得到box的
 for(var z=0;z<aClass.length;z++){
 if(aClass[z]=='selected'){
  aClass.splice(z,1);//利用數(shù)組的splice方法刪除找到的這個(gè)類
 }
 }
 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(' ');//當(dāng)前box顯示
 aLi[this.index].className+=' selected';//當(dāng)前menu添加select樣式
 }
 
 }
 }
 }

親測有效，不過都寫在一個(gè)方法里有點(diǎn)亂，而且類多的時(shí)候效率也是問題，不過類應(yīng)該不很很多吧==以后再優(yōu)化吧，這個(gè)功能用jquery很簡單。

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊兩個(gè)精彩的專題：javascript選項(xiàng)卡操作方法匯總 jquery選項(xiàng)卡操作方法匯總

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: