Twitter Bootstrapでタブを使ったサンプル

  • 21
    Like
  • 0
    Comment

以下にタブを使ったサンプルを置いた。2.x系の話ですよ。
(1.x系から乗り換えの際はチト苦労した)

http://abrakatabura.hatenablog.com/entry/2012/02/02/230010

ポイント

client.html
<div class="tabbable">
 <ul class="nav nav-tabs">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#tab1" data-toggle="tab">タブ1</a></li>
  <li><a href="#tab2" data-toggle="tab">タブ2</a></li>
 </ul>
 <div id="my-tab-content" class="tab-content">
  <div class="tab-pane active" id="home">
  </div>
  <div class="tab-pane" id="tab1">
   <p>タブ1の中身</p>
  </div>
  <div class="tab-pane" id="tab2">
   <p>tab2</p>
  </div>
 </div>
</div>

タブがクリックされイベントをJavaScript側で以下のように受け取れる。

control.js
$('a[data-toggle="tab"]').on('shown', function (e) {
 // クリックされたタブ名はこんな感じで取得する。
 var tabName = e.target.href;
 var items = tabName.split("#"); // activated tab

 // 処理内容を書く

 //e.relatedTarget // 直前のタブはこんなんで取得可能らしい
});

タブのhref名とtab-paneのID名

タブのhref名とtab-paneのID名を同じ文字列にしないと思ったように動きません!
これ意外と忘れてしまい、最近もハマりましたw

動的にタブを扱うJsdo.itの作品

GLSLを試せる、わりと実用的な作品

関連記事