先看效果：
- 新聞內容
- 財經內容
- 娛樂內容
- Javascript
完整代碼：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<title>常用tab切換-</title>
<style type="text/css">
#box{width:500px;font-size:12px}
#box ul{margin:0;padding:0;list-style:none}
#box #tab{height:25px;padding-left:10px;border-bottom:1px solid #AACBEE}
#box #tab li{width:80px;height:18px;padding-top:7px;margin-right:10px;text-align:center;float:left;background:#F3F8FD;cursor:pointer}
#box #tab li.on{width:78px;height:19px;padding-top:5px;border:1px solid #AACBEE;border-bottom:none;color:#00f;background:#E8F2F7;position:relative;top:1px}
#box #tab_con{border:1px solid #AACBEE;border-top:none;padding:20px}
#box #tab_con li{display:none}
#box #tab_con #tab_con_1{display:block;}
</style>
</head>
<body>
/*********1**********/
<div id="box">
<ul id="tab">
<li class="on" id="tab_1" onclick="switchTab(1)">新聞</li>
<li id="tab_2" onclick="switchTab(2)">財經</li>
<li id="tab_3" onclick="switchTab(3)">娛樂</li>
<li id="tab_4" onclick="switchTab(4)">娛樂</li>
</ul>
<ul id="tab_con">
<li id="tab_con_1">新聞內容</li>
<li id="tab_con_2">財經內容</li>
<li id="tab_con_3">娛樂內容</li>
<li id="tab_con_4">娛樂內容3</li>
</ul>
</div>
<script type="text/javascript">
function switchTab(n){
for(var i = 1; i <= 4; i++){
document.getElementById("tab_" + i).className = "";
document.getElementById("tab_con_" + i).style.display = "none";
}
document.getElementById("tab_" + n).className = "on";
document.getElementById("tab_con_" + n).style.display = "block";
}
</script>
</body>
</html>