用JS選項卡特效制作一個JS導航菜單特效，效果網址：
http:///keleyi/phtml/menu/index.htm
以下是完整源代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>js導航菜單--</title>
<style type="text/css">
/*全局樣式*/
*{font-size:12px;}
body{margin:0;padding:0;background-color:#FFFFFF;font-size:12px;color:#666666;font-family:"宋體",Arial, Helvetica, sans-serif;}
a{color:#5e5e5e;text-decoration:none;}
a:hover{color:#3366cc;text-decoration:underline;}
/*主導航菜單*/
#menu ul{padding:0;border:0;list-style:none;line-height:150%;margin-top:0;margin-right:0;margin-bottom:0;margin-left:15px;}
#menu_out{width:966px;padding-left:4px;margin:150px auto;background:url(http:///keleyi/phtml/menu/images/menu_left.gif) no-repeat left top;}
#menu_in{background:url(http:///keleyi/phtml/menu/images/menu_right.gif) no-repeat right top;padding-right:4px;}
#menu{background:url(http:///keleyi/phtml/menu/images/menu_bg.gif) repeat-x;height:73px;}
.menu_line{background:url(http:///keleyi/phtml/menu/images/menu_line.gif) no-repeat center top;width:8px;}
.menu_line2{background:url(http:///keleyi/phtml/menu/images/menu_line2.gif) no-repeat center top;width:15px;}
#nav{padding-left:20px;}
#nav li{float:left;height:35px;}
#nav li a{float:left;display:block;padding-left:6px;height:35px;background:url(http:///keleyi/phtml/menu/images/menu_on_left.gif) no-repeat left top;cursor:pointer;text-decoration:none;}
#nav li a span{float:left;padding:11px 14px 10px 10px;line-height:14px;background:url(http:///keleyi/phtml/menu/images/menu_on_right.gif) no-repeat right top;font-size:14px;font-weight:bold;color:#FFFFFF;text-decoration:none;}
#nav li .current{background-position:left 100%;}
#nav li .current span{background-position:right 100%;color:#333333;text-decoration:none;padding:14px 14px 7px 10px;}
/*子欄目*/
#menu_con{text-align:left;padding-left:20px;clear:both;}
#menu_con li{float:left;height:22px;margin-top:8px;}
#menu_con li a{display:block;float:left;background:url(http:///keleyi/phtml/menu/images/menu_on_left2.gif) no-repeat left top;cursor:pointer;padding-left:3px;}
#menu_con li a span{float:left;padding:6px 10px 4px 10px;line-height:12px;background:url(http:///keleyi/phtml/menu/images/menu_on_right2.gif) no-repeat right top;}
#menu_con li a:hover{text-decoration:none;background:url(http:///keleyi/phtml/menu/images/menu_on_left2.gif) no-repeat left bottom;}
#menu_con li a:hover span{background:url(http:///keleyi/phtml/menu/images/menu_on_right2.gif) no-repeat right bottom;}
</style>
<script type="text/javascript">
function setContentTab(name, curr, n) {
for (i = 1; i <= n; i++) {
var menu = document.getElementById(name + i);
var cont = document.getElementById("con_" + name + "_" + i);
menu.className = i == curr ? "current" : "";
if (i == curr) {
cont.style.display = "block";
} else {
cont.style.display = "none";
}
}
}
</script>
</head>
<body>
<div id="menu_out">
<div id="menu_in">
<div id="menu">
<ul id="nav">
<li><a class="current" onmouseover="setContentTab('one',1,6)" id="one1" href="http:///"><span>首 頁</span></a></li>
<li class="menu_line"> </li>
<li><a onmouseover="setContentTab('one',2,6)" id="one2" href="http:///menu/jquery/"><span>jquery 特效</span></a></li>
<li class="menu_line"> </li>
<li><a onmouseover="setContentTab('one',3,6)" id="one3" href="http:///menu/mvc/"><span>ASP.NET MVC</span></a></li>
<li class="menu_line"> </li>
<li><a onmouseover="setContentTab('one',4,6)" id="one4" href="http:///menu/javsscript/"><span>Javascript</span></a></li>
<li class="menu_line"> </li>
<li><a onmouseover="setContentTab('one',5,6)" id="one5" href="http:///menu/net/"><span>.NET</span></a></li>
<li class="menu_line"> </li>
<li><a onmouseover="setContentTab('one',6,6)" id="one6" href="http:///menu/cms/"><span>CMS</span></a></li>
</ul>
<!--nav end-->
<div id="menu_con">
<div style="display:block" id="con_one_1">
<ul>
<li>，網址:www.，開源CMS項目，C#.NET，ASP.NET MVC，Entity Framework，jQuery，Ajax</li>
</ul>
</div>
<div style="display:none" id="con_one_2">
<ul>
<li><a href="http:///a/bjac/88af29335890a287.htm" title="" target="_blank">div(tab)切換</a></li>
<li class="menu_line2"> </li>
<li><a href="http:///a/bjac/2041333085cb032d.htm" title="" target="_blank">Jquery選項卡切換效果</a></li>
<li class="menu_line2"> </li>
<li><a href="http:///a/bjac/768f469b95b61487.htm" title="" target="_blank">單行文字間歇向上滾動</a></li>
<li class="menu_line2"> </li>
<li><a href="http:///a/bjac/ed5eb8c2959c619e.htm" title="滾動頁面時DIV到達頂部時固定在頂部" target="_blank">滾動頁面時DIV到達頂部時固定在頂...</a></li>
<li class="menu_line2"> </li>
<li><a href="http:///a/bjac/a6d651710217f7a0.htm" title="使用jQuery UI修飾title屬性的氣泡懸浮框" target="_blank">使用jQuery UI修飾title屬性的氣泡...</a></li>
</ul>
</div>
<div style="display:none" id="con_one_3">
<ul>
<li><a href="http:///a/bjac/810a77709301a8a5.htm" title="" target="_blank">擴展方法不能進行動態調度</a></li>
<li class="menu_line2"> </li>
<li><a href="http:///a/bjac/6908245993816a6.htm" title="MVC Razor @Html.TextBox 默認值與樣式" target="_blank">MVC Razor @Html.TextBox 默認值與...</a></li>
<li class="menu_line2"> </li>
<li><a href="http:///a/bjac/eb6f273eb3c4cd07.htm" title="在ASP.NET MVC 3 中自定義AuthorizeAttribute時需要注意的頁面緩存問題" target="_blank">在ASP.NET MVC 3 中自定義Authoriz...</a></li>
<li class="menu_line2"> </li>
<li><a href="http:///a/bjac/4064796bf1f324c8.htm" title="" target="_blank">留言板：ASP.NET MVC4實例</a></li>
<li class="menu_line2"> </li>
<li><a href="http:///a/bjac/2916901353b081f1.htm" title="" target="_blank">留言板介紹</a></li>
</ul>
</div>
<div style="display:none" id="con_one_4">
<ul>
<li><a href="http:///a/bjac/e7f4d99c87604a8.htm" title="" target="_blank">JS Trim()</a></li>
<li class="menu_line2"> </li>
<li><a href="http:///a/bjac/5d7f4ac2efa72d30.htm" title="" target="_blank">菜單滾動至頂部後固定</a></li>
<li class="menu_line2"> </li>
<li><a href="http:///a/bjac/4f6d3873d0571805.htm" title="" target="_blank">HTML5時鐘</a></li>
<li class="menu_line2"> </li>
<li><a href="http:///a/bjac/ceb3c274df032ed5.htm" title="" target="_blank">javascript onmousedown 事件</a></li>
<li class="menu_line2"> </li>
<li><a href="http:///a/bjac/a6e756c811719fff.htm" title="" target="_blank">在圖片上顯示左右箭頭的翻頁代碼</a></li>
</ul>
</div>
<div style="display:none" id="con_one_5">
<ul>
<li><a href="http:///a/bjac/8f6bff4d6fca0f86.htm" title="" target="_blank">EF的開發模式到底有幾種</a></li>
<li class="menu_line2"> </li>
<li><a href="http:///a/bjac/3c51c0ae00d274b2.htm" title="" target="_blank">.NET中的參數</a></li>
<li class="menu_line2"> </li>
<li><a href="http:///a/bjac/b0d180c6b6cfb356.htm" title="無法打開登錄所請求的數據庫 登錄失敗" target="_blank">無法打開登錄所請求的數據庫 登錄...</a></li>
<li class="menu_line2"> </li>
<li><a href="http:///a/bjac/1750fa1eeb7782d5.htm" title="" target="_blank">CodeFirstExistingDatabaseSample</a></li>
<li class="menu_line2"> </li>
<li><a href="http:///a/bjac/2ea1f4e23c864a72.htm" title="" target="_blank">關於.NET的集合總結</a></li>
</ul>
</div>
<div style="display:none" id="con_one_6">
<ul>
<li><a href="http:///a/bjac/2916901353b081f1.htm" title="" target="_blank">留言板介紹</a></li>
<li class="menu_line2"> </li>
<li><a href="http:///a/bjac/4064796bf1f324c8.htm" title="" target="_blank">留言板：ASP.NET MVC4實例</a></li>
</ul>
</div>
</div>
<!--menu_con end--></div>
<!--menu end--></div>
</div>
</body>
</html>