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>Simple and practical tab menu</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><!--把下面代码加到<head>与</head>之间--><style type="text/css">Ul, li {margin: 0; padding: 0 ;}. tabBox {width: 268px; margin: 20px;} ul. tabTag {height: 28px; border-bottom: 1px solid #000; list-style: none} ul. tabTag li {float: left; line-height: 27px; height: 27px; padding: 0 18px; color: # ccc; border: 1px solid # ccc; border-bottom: none; margin-right: 5px; background: # fff; cursor: pointer;} ul. tabTag li. active {border-color: #000; background: # eee; color: red; position: relative; top: 1px ;}. tabCon {border: 1px solid #000; border-top: none; background: # fff ;}. tCon {display: none; background: # eee; padding: 25px ;}</style><script type="text/javascript">/* Function: implement the tab menu tabMenu (tabBox, navClass); parameter 1: tabBox (tab Container id) parameter 2: navClass (current label style class) remarks: depending on the specified html structure Author: wubai, QQ: 464216089, By: 2012.4.7 */function tabMenu (tabBox, navClass) {var tabNavLi = document. getElementById (tabBox ). getElementsByTagName ("ul") [0]. getElementsByTagName ("li"); var tabCon = document. getElementById (tabBox ). getElementsByTagName ("div") [0]. getElementsByTagName ("div"); var tabLens = tabCon. length; for (var I = 0; I<tabLens;i++){//应用js闭包传入参数i作为当前索引值赋值给m (function(m){tabNavLi[m].onmouseover = function(){for(var j=0; j<tabLens; j++){tabNavLi[j].className = (j==m)?navClass:"";tabCon[j].style.display = (j==m)?"block":"";}} })(i);}}//函数调用window.onload=function(){tabMenu("tabBox1","active");tabMenu("tabBox2","active");}</script></head><body><!--把下面代码加到<body>与</body>之间--><!--demo1--><div id="tabBox1" class="tabBox"><ul class="tabTag"><li class="active">News 1</li><li>Sports 1</li><li>Finance 1</li></ul><div class="tabCon"><div class="tCon" >News 1</div><div class="tCon">Sports 1 content</div><div class="tCon">Finance 1 content</div></div></div><!--demo2--><div id="tabBox2" class="tabBox"><ul class="tabTag"><li class="active">News 2</li><li>Sports 2</li><li>Finance 2</li></ul><div class="tabCon"><div class="tCon" >News 2 content</div><div class="tCon">Sports 2 content</div><div class="tCon">Finance 2 content</div></div></div></body></html></td> </tr></table>
Tip: you can modify some code before running
