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=)