小案例:实现菜单栏的切换,点击左侧边栏,展示右侧主体的页面
首先实现 html 页面的编写:
- <div id="header">
- </div>
- <div id="main">
- <!--左侧边栏-->
- <div class="affix">
- <h4>
- 用户中心
- </h4>
- <ul>
- <li>
- <a href="#container-myorder">
- 我的订单
- </a>
- </li>
- <li>
- <a href="#container-buy-stat-canvas">
- 消费统计(Canvas版)
- </a>
- </li>
- <li>
- <a href="#container-buy-stat-svg">
- 消费统计(SVG版)
- </a>
- </li>
- <li>
- <a href="#container-luck-lottery">
- 幸运抽奖
- </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');
- });
综上一个简单的菜单切换就实现了。
来源: http://www.bubuko.com/infodetail-1968165.html