原生tab选项卡制作

html部分

<div class="tab">
<div class="nav">
<ul>
<li class="active">选项1<i></i></li>
<li>选项2<i></i></li>
<li>选项3<i></i></li>
</ul>
</div>
<div class="content">
<div class="box" >我是第一个</div>
<div class="box none">我是第二个</div>
<div class="box none">我是第三个</div>
</div>
</div>

css部分

<style type="text/css">
ul,
ul li{
list-style: none;
margin:0 ;
padding:0 ;
}
.nav:after{
clear: both;
display: block;
content: " ";
visibility: hidden;
}
.nav ul li{
float: left;
width:100px ;
text-align: center;
height: 40px;
line-height:40px ;
background:#2378E1 ;
color: #fff;
position: relative;
}
.box{
width:300px ;
height: 100px;
background:#27AE60 ;
}
.nav ul li.active i{
display: inline-block;
width:0 ;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom:10px solid #F7F7F7 ;
position:absolute;
left:40px ;
bottom: 0;
}
.active{
background:#F39800 !important;
}
.none{
display: none;
}
.block{
display: block;
}
</style>

js部分

<script type="text/javascript">
window.onload=function(){
var btn=document.getElementsByClassName('nav')[0].getElementsByTagName('li');
var box=document.getElementsByClassName('box');
for(var i=0;i<btn.length;i++){ //循环绑定点击事件
btn[i].index=i; //第几个下标被点击
btn[i].onclick=function(){
for(var i=0;i<btn.length;i++){//先制空
btn[i].className='';
box[i].style.display='none';
}

this.className='active';
box[this.index].style.display='block';

}
}
}
</script>