<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <mce: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; } --></mce:style><style type="text/css" mce_bogus="1"> 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> <mce: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"; } } // --></mce:script> </head> <body> <div id="tab"> <div id="menu"> <ul> <li class="hover" οnmοuseοver="setTab(0)"> 菜单1 </li> <li οnmοuseοver="setTab(1)"> 菜单2 </li> <li οnmοuseοver="setTab(2)"> 菜单3 </li> <li οnmοuseοver="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> 基本效果已实现,用CSS美化一下效果很不错哦. 原载:http://www.hnbw.cn/Channel/LearINfoLi.aspx?ID=45