原生js實(shí)現(xiàn)tab選項(xiàng)卡切換
本文實(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)文章
基于Flowplayer打造一款免費(fèi)的WEB視頻播放器附源碼
Flowplayer是一款免費(fèi)的WEB視頻播放器。它支持播放flv、swf等流媒體和圖片文件,能夠非常流暢的播放視頻文件,支持自定義配置和擴(kuò)展。下面本篇文章給大家介紹基于Flowplayer打造一款免費(fèi)的WEB視頻播放器,需要的朋友可以參考下2015-09-09微信小程序一周時(shí)間表功能實(shí)現(xiàn)
這篇文章主要介紹了微信小程序一周時(shí)間表功能實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10js實(shí)現(xiàn)帶按鈕的上下滾動(dòng)效果
這篇文章主要介紹了js實(shí)現(xiàn)帶按鈕的上下滾動(dòng)效果,設(shè)計(jì)javascript鼠標(biāo)事件及頁(yè)面元素樣式的相關(guān)操作技巧,需要的朋友可以參考下2015-05-05WEB開(kāi)發(fā)之注冊(cè)頁(yè)面驗(yàn)證碼倒計(jì)時(shí)代碼的實(shí)現(xiàn)
近期在搞一個(gè)H5+backbone 項(xiàng)目,驗(yàn)證輸入手機(jī)號(hào) 驗(yàn)證碼倒計(jì)時(shí)功能,代碼中包含了前端樣式布局代碼和后端邏輯實(shí)現(xiàn),思路明確,具有參考借鑒價(jià)值,需要的朋友參考下吧2016-12-12