<!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>Tab菜单</title> <style type="text/css"> body { margin-bottom:20px; background-color:Gray; } #tab{ width:780px; border:0px; } #menu { float:left; z-index:0; } #menu ul { margin:0px; padding:0px; list-style-type:none; } #menu li { float:left; display:block; cursor:pointer; width:130px; text-align:center; padding:10px 0px; background-color:#a3dbff; border-right:1px solid #fff; } #menu li.hover{ background:#fff; border-bottom:solid 1px #fff; } #main1 { z-index:-1; position :relative; top:-1px; clear:left; border:solid 1px blue; background-color:#C6E2FF; } #main1 ul{ display: none; list-style:none; } #main1 ul.block{ display: block; } </style> <script type="text/javascript"> function setTab(n){ var tli=document.getElementById("menu").getElementsByTagName("li"); var mli=document.getElementById("main1").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> <div id="tab"> <div id="menu"> <ul> <li class="hover" onmouseover="setTab(0)">菜单1</li> <li onmouseover="setTab(1)">菜单2</li> <li onmouseover="setTab(2)">菜单3</li> <li onmouseover="setTab(3)">菜单4</li> </ul> </div> <div id="main1"> <ul class="block"> <li>aaaaaaaaa</li> </ul> <ul> <li>bbbbbbbbbb</li> </ul> <ul> <li>cccccccccc</li> </ul> <ul> <li>ddddddddd</li> </ul> </div> </div></body></html>
相关资源：敏捷开发V1.0.pptx
