Bootstrapのタブ切り替えがうまく動かなかった話と対処法について

WordPressのテーマ等でも頻繁に使用されるCSSフレームワーク、Bootstrap。
様々な機能があるBootstrapですが、今回は、中でも個人的に有用な「タブUI」の実装と、先日遭遇したトラブルについてメモ。

基本的な実装方法

とりあえず実装方法から。
BootstrapのCSSとJavaScriptを読み込み、HTMLで以下のように記述をすればOK。

<!-- タブメニュー -->
<ul class="nav nav-tabs">
	<li class="active"><a href="#tab1" data-toggle="tab">タブ1</a></li>
	<li><a href="#tab2" data-toggle="tab">タブ2</a></li>
	<li><a href="#tab3" data-toggle="tab">タブ3</a></li>
</ul>

<!-- タブの内容 -->
<div class="tab-content">
	<div class="tab-pane" id="tab1">
		<p>タブ1の内容</p>
	</div>
	<div class="tab-pane active" id="tab2">
		<p>タブ2の内容</p>
	</div>
	<div class="tab-pane" id="tab3">
		<p>タブ3の内容</p>
	</div>
</div>

最初に表示しておくタブを変えたい場合は、タブメニューのリスト要素に指定しているクラス「active」を表示させたいタブのメニューに付けかえるだけ。

タブ切り替えがうまく動作しない場合

自身で設計したサイトなら上記で問題ありませんが、既存のサイトに一部リニューアル等でタブUIを追加するときなどは、別のJavaScriptと競合してうまく動作しないケースもあります。
ブラウザの開発者ツールなどで原因を予想・特定し、解消してあげましょう。

例:スクロール制御系のJSとの競合

私が先日経験したのがこれ。
Bootstrapの他に複数のJSが作成・設置されているサイトで、スクロールを制御するJSと競合していました。調べてみると、a要素のクリック時の動作がなにやら制限されている様子。
元コードの修正や読み込みの指定を行える環境であれば、きちんと原因を解消するのが最善ですが、権限や作業可能な時間との兼ね合いでそれができないこともあることでしょう。

そんなときのために、BootstrapのタブUI実装においてはタブメニューはa要素でなくても動作する、ということを覚えておくと良いかもしれません。

上記の例では、タブメニューのa要素を別の要素に変え、CSSでcursor:pointer;などを指定してあげるといい感じに修正することができます。
(本来リンクはa要素でマークアップしたほうが良いため、推奨される方法ではありません。)

まとめ

0から作成しようと思うと記述が大変なタブUIですが、Bootstrapを使用すれば簡単なコードで実装することができます。
ぜひ効果的に使用しましょう!