欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

原生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="#">娛樂(lè)</a></li>
 </ul>
 </div>
 <div class="tab_box">
 <div>時(shí)事</div>
 <div class="hide">體育</div>
 <div class="hide">娛樂(lè)</div>
 </div>
 </div>
 </body>

2.css部分:樣式部分實(shí)現(xiàn)方法多種多樣,這是我寫(xiě)的簡(jiǎn)單的demo,我最不擅長(zhǎng)的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è)簡(jiǎn)單粗暴,完全沒(méi)有考慮如果tabMenu、tabBox有多個(gè)樣式的情況,不適應(yīng)項(xiàng)目只是一個(gè)思路。很多地方需要完善。下面考慮標(biāo)簽多個(gè)class的情況,不過(guò)一般都有多個(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樣式
 }
 
 }
 }
 }

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

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

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

相關(guān)文章

最新評(píng)論