Tip: you can modify some code before running
Navigation menu-js tab menu<!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>Navigation menu-js tab menu</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><!--把下面代码加到<head>与</head>之间--><style type="text/css">Body, div, ul, li {margin: 0 auto; padding: 0 ;}body {font: 12px ""; text-align: center ;}a: link {color: # 00F; text-decoration: none;} a: visited {color: # 00F; text-decoration: none;} a: hover {color: # c00; text-decoration: underline;} ul {list-style: none ;}. main {clear: both; padding: 8px; text-align: center ;}# tabs1 {text-align: left; width: 400px ;}. menu1box {position: relative; overflow: hidden; height: 22px; width: 400px; text-align: left ;}# menu1 {position: absolute; top: 0; left: 0; z-index: 1 ;}# menu1 li {float: left; display: block; cursor: pointer; width: 72px; text-align: center; line-height: 21px; height: 21px;} # menu1 li. hover {background: # fff; border-left: 1px solid #333; border-top: 1px solid #333; border-right: 1px solid #333 ;}. main1box {clear: both; margin-top:-1px; border: 1px solid #333; height: 181px; width: 400px; }# main1 ul {display: none ;} # main1 ul. block {display: block ;}</style><script>function setTab(m,n){var tli=document.getElementById("menu"+m).getElementsByTagName("li");var mli=document.getElementById("main"+m).getElementsByTagName("ul");for(i=0;i<tli.length;i++){tli[i].className=i==n?"hover":"";mli[i].style.display=i==n?"block":"none";}}</script></head><body><!--把下面代码加到<body>与</body>之间--><div id="tabs1"> <div class="menu1box"> <ul id="menu1"> <li class="hover" onmouseover="setTab(1,0)">ASP</li> <li onmouseover="setTab(1,1)">PHP</li> <li onmouseover="setTab(1,2)">ASP. NET</li> <li onmouseover="setTab(1,3)">AJAX</li> </ul> </div> <div class="main1box"> <div class="main" id="main1"> <ul class="block"><li>ASP content</li></ul> <ul><li>PHP content</li></ul> <ul><li>ASP. NET content</li></ul> <ul><li>AJAX content</li></ul> </div> </div></div>China WEB first stop</body></html>
Tip: you can modify some code before running