选项卡

<ul id="myTab" class="nav nav-pills" role="tablist">
  <li class="active"><a href="#bulletin" role="tab" data-toggle="pill">公告</a></li>
  <li><a href="#rule" role="tab" >规则</a></li>
  <li><a href="#forum" role="tab" >论坛</a></li>
  <li><a href="#security" role="tab" >安全</a></li>
  <li><a href="#welfare" role="tab" >公益</a></li>
</ul>
<!-- 选项卡面板 -->
<div id="myTabContent" class="tab-content">
  <div class="tab-pane fade in active" id="bulletin">公告内容面板</div>
  <div class="tab-pane fade" id="rule">规则内容面板</div>
  <div class="tab-pane fade" id="forum">论坛内容面板</div>
  <div class="tab-pane fade" id="security">安全内容面板</div>
  <div class="tab-pane fade" id="welfare">公益内容面板</div>
</div>

 

<script>
  $(function(){
    $("#myTab a").click(function(e){
      e.preventDefault();
      $(this).tab("show");
    });
  })
</script>