建站
咨询
售后
建站咨询
简单实现js菜单栏切换效果
分享一个小案例，实现菜单栏的切换，点击左侧边栏，展示右侧主体的页面，供大家参考，具体内容如下
为黄浦等地区用户提供了全套网页设计制作服务，及黄浦网站建设行业解决方案。主营业务为网站设计、成都网站制作、黄浦网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！
首先实现html页面的编写：
用户中心
我的订单消费统计（Canvas）消费统计（SVG）幸运抽奖
其次是css效果实现：
#main .affix {
box-sizing: border-box;
width: 210px;
float: left;
padding: 15px;
}
.affix h5 {
font-size: 1.2em;
margin: 10px 0;
}
.affix ul li{
padding: 5px 20px;
}
.affix ul li.active a{
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实现点击左侧边栏选项，展示右侧主体区域：
$('.affix ul li a').click(function(e){
e.preventDefault();
//修改li的active的位置
$(this).parent().addClass('active').siblings('.active').removeClass('active');
//修改右侧主体中的div的active的位置
var id = $(this).attr('href');
$(id).addClass('active').siblings('.active').removeClass('active');
});
综上一个简单的菜单切换就实现了。
更多菜单效果点击《JavaScript菜单专题》学习，还有一些不错的专题分享给大家： Javascript级联菜单特效汇总
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。
分享标题：简单实现js菜单栏切换效果
URL地址：http://lswzjz.com/article/gsjepc.html
