简单实现js菜单栏切换效果
分享一个小案例，实现菜单栏的切换，点击左侧边栏，展示右侧主体的页面，供大家参考，具体内容如下
首先实现html页面的编写：
分享一个小案例，实现菜单栏的切换，点击左侧边栏，展示右侧主体的页面，供大家参考，具体内容如下
首先实现html页面的编写：
其次是css效果实现：
#main.affix{
box-sizing:border-box;
width:210px;
float:left;
padding:15px;
}
.affixh4{
font-size:1.2em;
margin:10px0;
}
.affixulli{
padding:5px20px;
}
.affixulli.activea{
color:#e4393c;
font-weight:bold;
}
#main.right-body{
box-sizing:border-box;
margin-left:210px;
padding:15px;
}
#main.right-body>div{
display:none;
min-height:300px;
}
#main.right-body>div.active{
display:block;
}
最后一步运用简单的js实现点击左侧边栏选项，展示右侧主体区域：
$('.affixullia').click(function(e){
e.preventDefault();
//修改li的active的位置
$(this).parent().addClass('active').siblings('.active').removeClass('active');
//修改右侧主体中的div的active的位置
varid=$(this).attr('href');
$(id).addClass('active').siblings('.active').removeClass('active');
});
综上一个简单的菜单切换就实现了。
更多菜单效果点击《JavaScript菜单专题》学习，还有一些不错的专题分享给大家：Javascript级联菜单特效汇总
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。