以下にタブを使ったサンプルを置いた。2.x系の話ですよ。
（1.x系から乗り換えの際はチト苦労した）
ポイント
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名を同じ文字列にしないと思ったように動きません！
これ意外と忘れてしまい、最近もハマりましたｗ