Bootstrap3のtabを使って目次、表示の切り替え

wp-admin

7年前

Bootstrap3のタブを使って目次のリンク、目次のリンククリックで内容表示の切り替えを行うサンプルを作成しています。
　
なお、ここではBootstrapのv3.3.7を使用して動作確認しています。

デモ
HTML

１）タイトル１
２）タイトル２
３）タイトル３

１）タイトル１

コンテンツ１
　：
　：
　：

２）タイトル２

コンテンツ２
　：
　：
　：

３）タイトル３

コンテンツ３
　：
　：
　：

<ul class="list-unstyled">
  <li><a href="#cnt1" data-toggle="tab">１）タイトル１</a></li>
  <li><a href="#cnt2" data-toggle="tab">２）タイトル２</a></li>
  <li><a href="#cnt3" data-toggle="tab">３）タイトル３</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane panel active panel-default" id="cnt1">
    <div class="panel-heading">１）タイトル１</div>
    <div class="panel-body" >
コンテンツ１<br />
　：<br />
　：<br />
　：<br />
    </div>
  </div>

  <div class="tab-pane panel panel-default" id="cnt2">
    <div class="panel-heading">２）タイトル２</div>
    <div class="panel-body" >
コンテンツ２<br />
　：<br />
　：<br />
　：<br />
    </div>
  </div>

  <div class="tab-pane panel panel-default" id="cnt3">
    <div class="panel-heading">３）タイトル３</div>
    <div class="panel-body" >
コンテンツ３<br />
　：<br />
　：<br />
　：<br />
    </div>
  </div>
</div>