js實現菜單切換

小案例：實現菜單欄的切換，點擊左側邊欄，展現右側主體的頁面

首先實現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');
});

綜上一個簡單的菜單切換就實現了。