提示：您可以先修改部分代碼再運行
<!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>三樣式的選項卡菜單</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><!--把下面代碼加到<head>與</head>之間--><style type="text/css">html,body{padding:0;margin:0;background-color:#fff;font-size:12px;color:#333;font-family:"宋體",arial,helvetica,sans-serif;}ul,li{ margin:0; padding:0;}a{text-decoration:none;color:#333333;}a:hover{color:#a90000;text-decoration:underline;}.unit{border:1px solid #d4d4d4;background:url(yun_qi_img/u_top.gif) repeat-x left top;width:800px;margin:20px auto;}.unit_title{height:38px;line-height:38px;padding-left:13px;font-weight:bold;font-size:14px;}a.u_more{float:right;color:#a90000;margin-right:10px;font-size:12px;font-weight:normal;}.u_tab_div a{text-decoration:none;}.u_tab{float:left;background:url(yun_qi_img/tab_tip.gif) no-repeat right center;padding:0 7px;line-height:26px;margin-top:9px;color:#666;font-weight:normal;}.u_tab_no{float:left;padding:0 7px;line-height:26px;margin-top:9px;color:#666;font-weight:normal;}.u_tab_hover{float:left;background:url(yun_qi_img/tab_hover.gif) no-repeat right center;width:50px;text-align:center;line-height:26px;margin-top:9px;color:#666;font-weight:normal;}.ul_news{padding:5px 10px;padding-bottom:0;}.ul_news li{background:url() no-repeat left 11px;list-style:none;padding-left:10px;line-height:24px;}.ul_news li cite{font-style:normal;color:#aaa;float:right;}.ul_news li a{}.ul_news li span a{color:#a90000;}</style></head><body><!--把下面代碼加到<body>與</body>之間--><div><div class="unit"><div class="unit_title">更多>><div class="u_tab_div" id="tab01"><span class="u_tab_no">民事</span><span class="u_tab_hover">刑事</span><span class="u_tab">行政</span><span class="u_tab">賠償</span><span class="u_tab_no">執行</span></div></div><div id="tabcon01"><ul class="ul_news" ><li><cite>12-20</cite>民事一</li><li><cite>12-20</cite>民事二</li><li><cite>12-20</cite>民事三</li></ul><ul class="ul_news"><li><cite>12-20</cite>刑事一</li><li><cite>12-20</cite>刑事二</li><li><cite>12-20</cite>刑事三</li><li><cite>12-20</cite>刑事四</li><li><cite>12-20</cite>刑事五</li><li><cite>12-20</cite>刑事六</li></ul><ul class="ul_news" ><li><cite>12-20</cite>行政一</li><li><cite>12-20</cite>行政二</li><li><cite>12-20</cite>行政三</li><li><cite>12-20</cite>行政四</li><li><cite>12-20</cite>行政五</li></ul><ul class="ul_news" ><li><cite>12-20</cite>賠償一</li><li><cite>12-20</cite>賠償二</li><li><cite>12-20</cite>賠償三</li><li><cite>12-20</cite>賠償四</li></ul><ul class="ul_news" ><li><cite>12-20</cite>執行一</li><li><cite>12-20</cite>執行二</li><li><cite>12-20</cite>執行三</li><li><cite>12-20</cite>執行四</li><li><cite>12-20</cite>執行五</li><li><cite>12-20</cite>執行六</li><li><cite>12-20</cite>執行七</li><li><cite>12-20</cite>執行八</li></ul></div></div></div><p >尋找更多代碼，請訪問：編程之家 - 網頁特效學院</p><script type="text/javascript">function tabaction(parnode,parcon){var tabs = document.getelementbyid(parnode).getelementsbytagname("span");var tablength = tabs.length;var tabcon = document.getelementbyid(parcon).getelementsbytagname("ul");var tabconlength = tabcon.length;//初始化tab和tab contentfunction inittab(){for(var i=0;i<tablength;i++){tabs[i].classname = "u_tab";}tabs[tablength-1].classname = "u_tab_no";}function inittabcon(){for(var i=0;i<tabconlength;i++){tabcon[i].style.display = "none";}}for(var i=0;i<tablength;i++){tabs[i].thei = i;tabs[i].onclick = function(){var thei = this.thei;//被點擊的tab顯示為選中狀態，同時顯示相應的contentinittab();inittabcon();this.classname = "u_tab_hover";tabcon[thei].style.display = "block";//判斷被點擊tab的前一個tab,在非ie中可能為文本節點if(this.previoussibling){var preobj = this.previoussibling;if(this.previoussibling.nodetype==1){preobj.classname = "u_tab_no";}else if(this.previoussibling.nodetype==3 && this.previoussibling.previoussibling){preobj = this.previoussibling.previoussibling;preobj.classname = "u_tab_no";}}//去掉錨點的虛線框this.childnodes[0].blur();}}}tabaction("tab01","tabcon01");</script><script type="text/javascript">var as = document.getelementbyid("tabcon01").getelementsbytagname("a");for(var i=0;i<as.length;i++){as[i].href = "http://www.111cn.net";}</script></body></html>
提示：您可以先修改部分代碼再運行
