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实现多栏目切换效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

• JS封装的选项卡TAB切换效果示例
• 用AngularJS的指令实现tabs切换效果
• 利用JS实现点击按钮后图片自动切换的简单方法
• jsp图片效果大全（图像震动效果、闪烁效果、自动切换图像）
• 轻松实现js选项卡切换效果
• JS实现简单的tab切换选项卡效果