代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
font-size: 12px;
}
li {
list-style: none;
}
a{
text-decoration: none;
color: #333333;
}
#tab{
400px;
height: 30px;
text-align: center;
}
#tab ul li{
70px;
height: 30px;
border: 1px solid #ccc;
float: left;
line-height: 30px;
}
#content{
300px;
height: 200px;
}
.son{
500px;
height: 300px;
color: #333333;
display: none;
border: 1px solid #00aced;
}
.sonactive{
display: block;
}
.active{
color: green;
}
</style>
</head>
<body>
<div id="tab">
<ul>
<li class="active">标题一</li>
<li>标题一</li>
<li>标题一</li>
<li>标题一</li>
</ul>
</div>
<div id="content">
<div class="son sonactive">
是两个div块，是兄弟节点，所以需要让tab按钮和下方内容一一对应至于显示内容在HTML结构里用
</div>
<div class="son">
动作的添加，在切换时首先把样式，下方内容全部去掉，然后为当前按钮添加样式，显示与当前按钮对应的内容：：
</div>
<div class="son">
实现思路是点击上方的按钮，下方的内容随之发生改变，上方和下方用的是两个div块，是兄弟节点，所以需要让tab按钮和下方内容一一对应
</div>
<div class="son">
上方和下方用的是两个div块，是兄弟节点，所以需要让tab按钮和下方内容一一对应至于显示内容在HTML结构里用style=“display：block/none”
</div>
</div>
<script>
var obtn=document.getElementById("tab");
var oli=obtn.getElementsByTagName("li");
var fadiv=document.getElementById("content");
var odiv=fadiv.getElementsByClassName("son");
for(var i=0;i<oli.length;i++){
oli[i].index=i;
oli[i].onclick=function() {
for(var i=0;i<oli.length;i++){
oli[i].classsName="";
odiv[i].style.display="none";
}
this.className="active";
odiv[this.index].style.display="block"
}
}
</script>
</body>
</html>