js实现菜单切换

Posted 2020-09-02 橙子

小案例：实现菜单栏的切换，点击左侧边栏，展示右侧主体的页面

首先实现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‘);
});

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