bootstrapとjqueryでタブ表示を作成する方法

必要なもの

bootstrap
jquery

手順

まずはTabのheaderを作成します。

<!-- Nav tabs -->
<div id="tabs">
  <!-- Tabs header -->
  <ul>
    <li><a id="tabs1" href="#content1">Tab1</a></li>
    <li><a id="tabs2" href="#content2">Tab2</a></li>
  </ul>
</div>

するとこんな感じのtabが出来ます
f:id:portaltan:20150929171825p:plain

次にタブの中のコンテンツを作成します。

<!-- Nav tabs -->
<div id="tabs">

  <!-- Tabs header -->
  <ul>
    <li><a id="tabs1" href="#content1">Tab1</a></li>
    <li><a id="tabs2" href="#content2">Tab2</a></li>
  </ul>

  <!-- Tabs body -->
  <div id="content1" class="panel">
    content1
  </div>
  <div id="content2" class="panel">
    content2
  </div>
</div>

こうするとコンテンツ内の内容が表示されるようになります。
しかしこの段階では全てのコンテンツが全てのタブに表示されています。
f:id:portaltan:20150929172108p:plain

次にjs側の設定を行います。

$('[id^=tabs]').click(function(){
    $("#tabs li").removeClass("active");
    $(this).parent().addClass("active");
    $("#tabs .panel").hide();
    $(this.hash).fadeIn();
    return false;
});