js实现菜单切换

<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>

#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;
}

$(‘.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‘);
});