JavaScript实现多栏目切换效果

在网站开发中尤其是新闻类网站，经常遇到多栏目切换的设计，这种效果有很多种实现效果，现在记录一种很简单的写法：

 <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> <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><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>

以上所述是小编给大家介绍的JavaScript实现多栏目切换效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！