Tab选项卡用的还是挺多的，现在我们使用javascript 实现：
效果图：无附加和修饰，简单实现
全部代码：
<!doctype html>
<html >
<head>
<meta charset="UTF-8">
<title>Tab 选项卡</title>
<style>
*{margin:0; padding:0;}
#abc{width:400px; height:400px; background-color:#eee; position:absolute;
left:50%;top:50%; margin-left:-200px; margin-top:-200px;}
#abc ul{width:400px; height:100px; background-color:#ccc; list-style-type:none;
padding:0; margin:0;}
#abc ul li{float:left; width:98px; height:100px; border:1px solid rgb(83, 43, 43);
text-align:center; line-height:100px; cursor:pointer;}
#abc .div_hide{width:400px; height:300px; display:none;}
#abc .div_show{display:block;width:400px; height:300px;}
</style>
</head>
<body>
<div id="abc">
<ul>
<li>新闻</li>
<li>视频</li>
<li>音乐</li>
<li>游戏</li>
</ul>
<div class="div_show">新闻的内容</div>
<div class="div_hide">视频的内容</div>
<div class="div_hide">音乐的内容</div>
<div class="div_hide">游戏的内容</div>
</div>
<script>
var abc=document.getElementById("abc");
var obj_title=abc.getElementsByTagName("li");
var obj_content=abc.getElementsByTagName("div");
for(var i=0;i<obj_title.length;i++){
obj_title[i].value=i;
obj_title[i].οnclick=function(){
for(var j=0;j<obj_content.length;j++){ //置空所有 div 使之不显示
obj_content[j].className="div_hide";
}
obj_content[this.value].className="div_show";
}
}
</script>
</body>
</html>
![主流浏览器四大综合性能测试[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)