您的位置：首页 > Web前端 > JavaScript

简单实现js菜单栏切换效果

2017-03-04 10:20 555 查看

分享一个小案例，实现菜单栏的切换，点击左侧边栏，展示右侧主体的页面，供大家参考，具体内容如下

首先实现html页面的编写：

<div id="header"></div>
<div id="main">
<!--左侧边栏-->
<div class="affix">
<h4>用户中心</h4>
<ul>
<li><a href="#container-myorder" rel="external nofollow" >我的订单</a></li>
<li><a href="#container-buy-stat-canvas" rel="external nofollow" >消费统计（Canvas版）</a></li>
<li><a href="#container-buy-stat-svg" rel="external nofollow" >消费统计（SVG版）</a></li>
<li><a href="#container-luck-lottery" rel="external nofollow" >幸运抽奖</a></li>
</ul>
</div>
<!--右侧主体区域-->
<div class="right-body">
<div class="active" id="container-myorder">我的订单</div>
<div id="container-buy-stat-canvas">消费统计（Canvas）</div>
<div id="container-buy-stat-svg">消费统计（SVG）</div>
<div id="container-luck-lottery">幸运抽奖</div>
</div>
</div>
<div id="footer"></div>

其次是css效果实现：

#main .affix {
box-sizing: border-box;
width: 210px;
float: left;
padding: 15px;
}
.affix h4 {
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');
});

综上一个简单的菜单切换就实现了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： js 菜单切换

相关文章推荐

新的分享

章节导航