效果：
代码：
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>JavaScript实现多栏目切换效果</title> <style> .news_wrap { width: 380px; height: 266px; float: left; margin-left: 15px; } .news_head { width: 380px; border-bottom: 2px solid #dedede; height: 51px; line-height: 51px; } .tabList ul li { float: left; cursor: pointer; font-weight: bold; text-align: center; font-size: 16px; width: 72px; } .cli1 { color: #3a7aaf; border-bottom: 2px solid #3a7aaf; } .more { font-size: 14px; color: #9a9a9a; float: right; font-weight: normal; padding-right: 0; } .tabCon { width: 376px; padding-top: 13px; overflow: hidden; } </style> </head> <body> <div class="news_wrap"> <div class="news_head"> <div class="tabList"> <ul> <li class="cli1" id="p1" onmouseover="return swap_tab(1)">工作动态</li> <li class="cli2" id="p2" onmouseover="return swap_tab(2)">媒体链接</li> <li class="cli2" id="p3" onmouseover="return swap_tab(3)">领导活动</li> </ul> </div> <div class="more"> <div id="j1"> 工作动态_more</div> <div id="j2" style="display: none;"> 媒体链接_more</div> <div id="j3" style="display: none;"> 领导活动_more </div> </div> </div> <div class="tabCon"> <div id="n1"> <li>工作动态_list</li> <li>工作动态_list</li> <li>工作动态_list</li> </div> <div id="n2" style="display: none;"> <li>媒体链接_list </li> <li>媒体链接_list </li> <li>媒体链接_list </li> </div> <div id="n3" style="display: none;"> <li>领导活动_list </li> <li>领导活动_list </li> <li>领导活动_list </li> </div> </div> </div> </body> <script> function swap_tab(n) { //鼠标触发事件 for (var i = 1; i < 4; i++) { var curC = document.getElementById("n" + i); var curB = document.getElementById("p" + i); var mores = document.getElementById("j" + i); if (n == i) { curC.style.display = "block"; curB.className = "cli1"; mores.style.display = "block"; } else { curC.style.display = "none"; curB.className = "cli2"; mores.style.display = "none"; } } } </script> </html>