HTML：

[code]<div class="box">
<div class="title">
<ul>
<li>标题1</li>
<li>标题2</li>
<li>标题3</li>
</ul>
</div>
<div class="content">
<ul>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
</ul>
</div>
</div>

CSS:

[code] *{margin: 0; padding: 0; list-style: none;}
.box{width: 500px; height: 300px; border: 2px solid #999; margin: 100px}
.title{width: 500px; height: 50px;}
.title ul li{float: left; display: block; width: 150px; background: skyblue; line-height: 50px; text-align: center; margin-right: 25px; cursor: pointer; font-size: 20px; font-weight: bold;}
.title ul li:nth-child(3){ margin-right: 0px;}
.content{width: 500px; height: 250px; overflow: hidden;}
.content  ul li{width: 500px; height: 250px; display: block; padding: 20px; font-size: 30px; font-weight: bold;}

JS：

[code]<script>
var tit = document.getElementsByClassName("title")[0];
var lis = tit.getElementsByTagName("li");
var con = document.getElementsByClassName("content")[0];
var tabs = con.getElementsByTagName("li");
for(var i = 0;i<lis.length;i++){
lis[i].index = i;
lis[i].onclick = function(){
for(var j =0 ;j<lis.length; j++){
lis[j].style.background="skyblue";
tabs[j].style.display="none";
}
lis[this.index].style.background="rebeccapurple";
tabs[this.index].style.display="block";
}
}
</script>

最终效果图：