<!DOCTYPE html>
<html>
<head>
<title>tab标签页</title>
<meta charset="utf-8">
<style type="text/css">
ul{
list-style-type: none;
margin: 0;
padding: 0;
}
ul li{
float: left;
margin-right: 10px;
}
#tab_con{
clear: left;
margin-top: 15px;
}
.active{
background: #333;
color: #fff;
}
.one{
100%;
height: 200px;
background: #f00;
}
.two{
100%;
height: 200px;
background: #0f0;
display: none;
}
.three{
100%;
height: 200px;
background: #00f;
display: none;
}
</style>
</head>
<body>
<ul id="tab_nav">
<li class="active">tab1</li>
<li>tab2</li>
<li>tab2</li>
</ul>
<div id="tab_con">
<div class="one">内容1</div>
<div class="two">内容2</div>
<div class="three">内容3</div>
</div>
</body>
<script type="text/javascript">
//利用索引值进行传值
var tab=document.getElementById('tab_nav').children;
var con=document.getElementById('tab_con').children;
for(var i=0;i<tab.length;i++){
tab[i].index=i;
tab[i].onclick=function(){
for(j=0;j<con.length;j++){
con[j].style.display="none";
tab[j].className="";
}
con[this.index].style.display="block";
this.className="active";
}
}
</script>
</html>