本實例要樣式和JS的通用性方面都存在問題，不過樣式方式有值得借鑒的地方
效果預覽網址:http:///keleyi/phtml/tabswitch/tabstyle.htm
這是一個橫向的tab切換，豎向的請參考：http:///a/bjac/a96fnfrf.htm
以下是本效果代碼：
<!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=utf-8" />
<title>tab切換樣式--</title>
<style type="text/css">
#box_keleyi_com{width:500px;font-size:12px}
#box_keleyi_com ul{margin:0;padding:0;list-style:none}
#box_keleyi_com #tab{height:25px;padding-left:10px;border-bottom:1px solid #AACBEE}
#box_keleyi_com #tab li{width:80px;height:18px;padding-top:7px;margin-right:10px;text-align:center;float:left;background:#F3F8FD;cursor:pointer}
#box_keleyi_com #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_keleyi_com #tab_con{border:1px solid #AACBEE;border-top:none;padding:20px}
#box_keleyi_com #tab_con li{display:none}
#box_keleyi_com #tab_con #tab_con_1{display:block}
</style>
</head>
<body>
<div id="box_keleyi_com">
<ul id="tab">
<li class="on" id="tab_1" onClick="switchTab(1)">CMS</li>
<li id="tab_2" onClick="switchTab(2)">jQuery</li>
<li id="tab_3" onClick="switchTab(3)">Javascript</li>
</ul>
<ul id="tab_con">
<li id="tab_con_1"><a href="http:///menu/cms/" target="_blank">CMS</a><br />本實例要樣式和JS的通用性方面都存在問題，不過樣式方式有值得借鑒的地方</li>
<li id="tab_con_2"><a href="http:///menu/jquery/" target="_blank">jQuery</a><br /><a href="http:///a/bjac/ac398357acb82782.htm" title="" target="_blank">jquery倒計時</a><br /><a href="http:///a/bjac/88af29335890a287.htm" title="" target="_blank">div(tab)切換</a><br /><a href="http:///a/bjac/2041333085cb032d.htm" title="" target="_blank">Jquery選項卡切換效果</a><br /><a href="http:///a/bjac/768f469b95b61487.htm" title="" target="_blank">單行文字間歇向上滾動</a><br /><a href="http:///a/bjac/ed5eb8c2959c619e.htm" title="滾動頁面時DIV到達頂部時固定在頂部" target="_blank">滾動頁面時DIV到達頂部時固定在頂...</a><br /><a href="http:///a/bjac/a6d651710217f7a0.htm" title="使用jQuery UI修飾title屬性的氣泡懸浮框" target="_blank">使用jQuery UI修飾title屬性的氣泡...</a><br /><a href="http:///a/bjac/bf0eb8c02085b10d.htm" title="" target="_blank">jquery清空textarea等輸入框</a><br /><a href="http:///a/bjac/939631bb07adb4dc.htm" title="" target="_blank">jquery關燈特效</a><br /><a href="http:///a/bjac/f4a6f78d74a251c5.htm" title="jquery根據滾動像素顯示隱藏頂部導航條" target="_blank">jquery根據滾動像素顯示隱藏頂部導...</a><br /><a href="http:///a/bjac/7e8897e5ec0849e9.htm" title="" target="_blank">可改變大小DIV層</a><br /></li>
<li id="tab_con_3"><a href="http:///menu/javascript/" target="_blank">Javascript</a><a href="http:///a/bjac/fca5ac722271d2d5.htm" title="" target="_blank">js獲取網頁可見區域寬</a><br /><a href="http:///a/bjac/ade2f3941bd75ba.htm" title="" target="_blank">js導航菜單</a><br /><a href="http:///a/bjac/e7f4d99c87604a8.htm" title="" target="_blank">JS Trim()</a><br /><a href="http:///a/bjac/5d7f4ac2efa72d30.htm" title="" target="_blank">菜單滾動至頂部後固定</a><br /><a href="http:///a/bjac/4f6d3873d0571805.htm" title="" target="_blank">HTML5時鐘</a></li>
</ul>
</div>
<script type="text/javascript">
function switchTab(n){
for(var i = 1; i <= 3; 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>