タブで表示切替する

タブをクリックして、コンテンツ内容を切替ます。

参考にしたサイト様はこちら。

http://www4.plala.or.jp/airegin/sample.html#

http://hacknote.jp/archives/2034/

http://qiita.com/tonkotsuboy_com/items/15a914f073c8f9bb1344

http://bootstrap3-guide.com/compornent/navs.html

以下、備忘録。

全体を覆う要素(例 div)にtab-contentクラスを適用します

子要素というか、各タブ内容はtab-paneクラスを適用します。

activeクラスを指定すると、その要素がアクティブになるようです。

各タブはidを設定して指定できるようにします。

タブ切替のためのナビが必要

ってことで、

 ULタグにnav nav-tabsクラスを設定して

LIにはactive、そしてaタグを内包させて

aタグには

<a href="#tab1" data-toggle="tab">Home</a>

 こんな感じの設定

<ul class="nav nav-tabs">
  <li class="active"><a href="#tab1" data-toggle="tab">Home</a></li>
  <li><a href="#tab2" data-toggle="tab">Profile</a></li>
  <li><a href="#tab3" data-toggle="tab">Messages</a></li>
</ul>

 全体でいうとこういった感じです。

http://bootstrap3-guide.com/compornent/navs.html

ナビはピル型にもできるようです。

data-toggle="pill"

カプセルのようにボタンっぽいタイプのナビです。