Tip: you can modify some code before running
<!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>Three-style tab menu</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;}. 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: 9 px; 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 {}. ul_news li span a {color: # a90000 ;}</style></head><body><!--把下面代码加到<body>与</body>之间--><div><div class="unit"><div class="unit_title">More><div class="u_tab_div" id="tab01">Enforcement of civil and criminal compensation</div></div><div id="tabcon01"><ul class="ul_news" ><li><cite>12-20</cite>Civil 1</li><li><cite>12-20</cite>Civil II</li><li><cite>12-20</cite>Civil 3</li></ul><ul class="ul_news"><li><cite>12-20</cite>Criminal 1</li><li><cite>12-20</cite>Criminal 2</li><li><cite>12-20</cite>Criminal 3</li><li><cite>12-20</cite>Criminal 4</li><li><cite>12-20</cite>Criminal 5</li><li><cite>12-20</cite>Criminal 6</li></ul><ul class="ul_news" ><li><cite>12-20</cite>Administrative 1</li><li><cite>12-20</cite>Administrative 2</li><li><cite>12-20</cite>Administrative 3</li><li><cite>12-20</cite>Administrative 4</li><li><cite>12-20</cite>Administration 5</li></ul><ul class="ul_news" ><li><cite>12-20</cite>Compensation 1</li><li><cite>12-20</cite>Compensation 2</li><li><cite>12-20</cite>Compensation 3</li><li><cite>12-20</cite>Compensation 4</li></ul><ul class="ul_news" ><li><cite>12-20</cite>Run 1</li><li><cite>12-20</cite>Execution 2</li><li><cite>12-20</cite>Execution 3</li><li><cite>12-20</cite>Execution 4</li><li><cite>12-20</cite>Execution 5</li><li><cite>12-20</cite>Run 6</li><li><cite>12-20</cite>Run 7</li><li><cite>12-20</cite>Execute 8</li></ul></div></div></div><p >For more code, visit: programming home-website Special Effects School</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; // initialize the tab and 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>
Tip: you can modify some code before running
