原生js选项卡

html部分：

<div id="tab">
<ul>
<li class="active">第一个</li>
<li>第二个</li>
<li>第三个</li>
</ul>
<div class="select" style="display:block;">1</div>
<div class="select">2</div>
<div class="select">3</div>
</div>

css部分：

#tab{
border: 1px solid #ccc;
float: left;
}
#tab li{
float: left;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
list-style: none;
}
#tab li.active{
background: #ccc;
}
.select{
display: none;
float: left;
width: 300px;
height: 300px;
border-top: 1px solid #ccc;
}

js部分：

var tabli = document.getElementsByTagName('li');
var tabdiv = document.getElementsByClassName('select');
for(var i=0; i<tabli.length; i++){
tabli[i].index = i; //自定义属性
tabli[i].onclick=function(){
for(var i=0;i<tabli.length;i++){
tabli[i].className = '';
tabdiv[i].style.display = 'none';
}
this.className= 'active';
tabdiv[this.index].style.display = 'block';
}
}

以上就是原生js选项卡的代码