提示：您可以先修改部分代碼再運行
<html><head> <style> * { margin: 0; padding: 0; } ul { list-style: none; } #menu { width: 860px; margin: 55px auto; font-size: 13px; border: 1px solid orange; overflow: hidden; } #tabMenu { background: orange; height: 30px; width: 870px; } #tabMenu li { float: left; line-height: 30px; width: 143px; background: #fdceff; margin-right: 1px; text-align: center; } #tabMenu .bgcaption { background: #fbb7fd; color: #fff; font-weight: bold; } #tabContent { width: 860px; position: relative; height: 100px; } #tabContent ul { background: #fbb7fd; width: 144px; position: absolute; top: 0; left: 0; } #tabContent .current { display: block; } #tabContent .normal { display: none; } </style> <script type="text/javascript"> function tabChange(num) { var tabMenulist = document.getElementById("tabMenu").getElementsByTagName("li"); var tabContentlist = document.getElementById("tabContent").getElementsByTagName("ul"); for (var i = 0; i < tabMenulist.length; i++) { tabMenulist[i].className = ""; tabContentlist[i].className = "normal"; } tabMenulist[num].className = "bgcaption"; tabContentlist[num].className = "current"; document.getElementById("list_" + num).style.left = num * 144 + "px"; } </script></head><body> <div id="menu"> <div id="tabMenu"> <ul> <li onmouseover="tabChange(0)">新聞</li> <li onmouseover="tabChange(1)">遊戲</li> <li onmouseover="tabChange(2)">聊天</li> <li onmouseover="tabChange(3)">產品</li> <li onmouseover="tabChange(4)">音樂</li> <li onmouseover="tabChange(5)">論壇</li> </ul> </div> <div id="tabContent"> <ul id="list_0"> <li>網易新聞</li> <li>新浪新聞</li> <li>騰訊新聞</li> <li>搜狐新聞</li> </ul> <ul id="list_1" class="normal"> <li>網路遊戲</li> <li>單機遊戲</li> <li>小遊戲</li> </ul> <ul id="list_2" class="normal"> <li>QQ即時通</li> <li>msn即時通</li> </ul> <ul id="list_3" class="normal"> <li>暫無!</li> <li>暫無!</li> <li>暫無!</li> <li>暫無!</li> </ul> <ul id="list_4" class="normal"> <li>線上試聽</li> <li>下載歌詞</li> </ul> <ul id="list_5" class="normal"> <li>天涯社區</li> <li>貓撲論壇</li> </ul> </div> </div></body></html>
提示：您可以先修改部分代碼再運行
