原生js實現tab選項卡切換
編輯：關於JavaScript
本文實例為大家分享了原生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很簡單。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。
小編推薦
熱門推薦