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

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

1)タイトル1
コンテンツ1
 :
 :
 :

2)タイトル2
コンテンツ2
 :
 :
 :

3)タイトル3
コンテンツ3
 :
 :
 :

<ul class="list-unstyled">
  <li><a href="#cnt1" data-toggle="tab">1)タイトル1</a></li>
  <li><a href="#cnt2" data-toggle="tab">2)タイトル2</a></li>
  <li><a href="#cnt3" data-toggle="tab">3)タイトル3</a></li>
</ul>

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

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

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

関連記事の目次

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です