http://www.w3cmark.com/demo/demo13.html
1 //js实现代码 2 <script language="javascript"> 3 window.onload=function(){ 4 var nav=document.getElementById("tab").getElementsByTagName("li"); 5 var con=document.getElementById("con").getElementsByTagName("div"); 6 for(i=0;i<nav.length;i++){ 7 nav[i].index = i; 8 nav[i].onmouseover=function(){ 9 for(var n = 0; n < con.length; n++) { 10 con[n].style.display = "none"; 11 nav[n].className = ""; 12 } 13 con[this.index].style.display = "block" 14 nav[this.index].className = "cur"; 15 } 16 17 } 18 } 19 </script>
CSS样式：
1 .nav{ height:30px;} 2 .nav li{ display:inline-block; width:100px; height:30px;line-height:30px; float:left; cursor:pointer; text-align:center;background:#ddd;} 3 .nav li.cur{color:#fff;background:#f60} 4 .con{ display:none; padding-top:10px;}
HTML代码：
1 <div class="box"> 2 3 <div class="box"> 4 <div class="nav" id="tab"> 5 <ul> 6 <li class="cur">菜单一 </li> 7 <li>菜单二 </li> 8 <li>菜单三 </li> 9 <li>菜单四 </li> 10 </ul> 11 </div> 12 <div id="con"> 13 <div class="con" style="display:block"> 14 <ul> 15 <li>11111111111111111111</li> 16 <li>11111111111111111111</li> 17 <li>11111111111111111111</li> 18 <li>11111111111111111111</li> 19 <li>11111111111111111111</li> 20 </ul> 21 </div> 22 <div class="con"> 23 <ul> 24 <li>222222222222222222222</li> 25 <li>222222222222222222222</li> 26 <li>222222222222222222222</li> 27 <li>222222222222222222222</li> 28 <li>222222222222222222222</li> 29 </ul> 30 </div> 31 <div class="con"> 32 <ul> 33 <li>333333333333333333</li> 34 <li>333333333333333333</li> 35 <li>333333333333333333</li> 36 <li>333333333333333333</li> 37 <li>333333333333333333</li> 38 </ul> 39 </div> 40 <div class="con"> 41 <ul> 42 <li>44444444444444444444</li> 43 <li>44444444444444444444</li> 44 <li>222222222222222222222</li> 45 <li>222222222222222222222</li> 46 <li>222222222222222222222</li> 47 </ul> 48 </div> 49 </div> 50 </div> 51 52 </div>