<!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" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>TAB（Nav导航菜单</title><style type="text/css">
/* TAB*/
.tab{width:520px;height:auto;float:right;} .tab ul li{float:left;margin-left:10px;} .menu_tab{float:right;width:520px;padding:15px 0 15px 10px;height:auto;text-indent:15px;border:1px solid #eaeaea;} .menu_tab span a{text-decoration:none;} </style> </head> <body> <script tyle="text/javascript"> function qiehuan(num){ for(var i=0; i<=4; i++){ if(i==num){ document.getElementById("tab_qie"+i).style.display="block"; document.getElementById("mytab"+i).className="tab_on"; } else { document.getElementById("tab_qie"+i).style.display="none"; document.getElementById("mytab"+i).className=""; } } }</script>
</head>
<body>
<div class="tab"> <ul> <li id="mytab0" class="tab_on" οnmοuseοver=javascript:qiehuan(0) ><a href="">new tip</a></li> <!-- 如换成鼠标点击触发事件可改onmouseover为onClick=***--> <li id="mytab1" class="tab_off" οnmοuseοver=javascript:qiehuan(1)><a href="">tips</a></li> <li id="mytab2" class="tab_off" οnmοuseοver=javascript:qiehuan(2)><a href="">summary</a></li> <li id="mytab3" class="tab_off" οnmοuseοver=javascript:qiehuan(3)><a href="">cate</a></li> <li id="mytab4" class="tab_off" οnmοuseοver=javascript:qiehuan(4)><a href="">data</a></li> </ul> <div class="menu_tab"> <div id="tab_qie0" style="display:block"> <span><a href="">栏目1</a></span> <span><a href="">栏目2</a></span> <span><a href="">栏目3</a></span> </div> <div id="tab_qie1" style="display:none"> <span><a href="">栏目4</a></span> <span><a href="">栏目5</a></span> <span><a href="">栏目6</a></span> </div> <div id="tab_qie2" style="display:none"> <span><a href="">栏目7</a></span> <span><a href="">栏目8</a></span> <span><a href="">栏目9</a></span> </div> <div id="tab_qie3" style="display:none"> <span><a href="">栏目10</a></span> <span><a href="">栏目11</a></span> <span><a href="">栏目12</a></span> </div> <div id="tab_qie4" style="display:none"> <span><a href="">栏目13</a></span> <span><a href="">栏目14</a></span> <span><a href="">栏目15</a></span> </div> </div></div>
</body>