選項卡是我們工作中常用到的方法储狭，日常生活中總喜歡用jquery來寫互婿，下面我為大家總結(jié)了幾種原生方法捣郊，供參考：
先上靜態(tài)文本：
<style>
.tab{
height:50px;
}
.item{
width:100px;
height:50px;
background: red;
color:white;
text-align: center;
line-height: 50px;
margin-bottom: 10px;
float: left;
border: 1px solid blue;
}
.item.itemed{
background: blue;
border: 1px solid red;
}
.contain .content{
display: none;
width: 300px;
height:200px;
border: 1px solid red;
}
.contain .show{
display: block;
}
</style>
<div class="tab">
<div class="item itemed">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<div class="contain">
<div class="content show">1</div>
<div class="content">2</div>
<div class="content">3</div>
</div>
下面是JS代碼：
方法一：for循環(huán)嵌套
<script>
var tabs = document.querySelectorAll(".item");
var cons = document.querySelectorAll(".content");
for(var i=0;i<tabs.length;i++){
tabs[i].index = i;
tabs[i].onclick = function(){
for(var i=0;i<tabs.length;i++){
tabs[i].classList.remove("itemed");
cons[i].classList.remove("show");
}
this.classList.add("itemed");
cons[this.index].classList.add("show");
}
}
</script>
方法二：利用閉包
<script>
var index = 0;
for(var i=0;i<tabs.length;i++){
(function(j){
tabs[j].onclick =function(){
tabs[index].classList.remove("itemed");
cons[index].classList.remove("show");
index = j;
console.log(index);
tabs[index].classList.add("itemed");
cons[index].classList.add("show");
}
})(i)
}
</script>
在這里我用了classList方法，下面介紹一個這個方法的幾種屬性：
- length：表示元素類名的個數(shù)慈参，只讀
- item()：支持一個參數(shù)呛牲，為類名的索引，返回對應(yīng)的類名
- add()： 支持一個類名字符串參數(shù)驮配。表示往類名列表中新增一個類名娘扩；如果之前類名存在，則添加忽略壮锻。
- remove() 支持一個類名字符串參數(shù)琐旁。表示往類名列表中移除該類名。
- toggle() 支持一個類名字符串參數(shù)躯保。無則加勉旋膳，有則移除之意。若類名列表中有此類名途事，移除之验懊，并返回false; 如果沒有，則添加該類名尸变，并返回true义图。
- contains() 支持一個類名字符串參數(shù)。表示往類名列表中是否包含該類名召烂。有點對應(yīng)jQuery中的hasClass方法碱工。
