BootstrapのTabを最適化
2014年09月05日(金) 18時23分
Bootstrapのタブの機能を強化する方法です。
なかなか、言葉で説明しにくいですが、Bootstrapを使用して作られたあるページ内にタブがあったとします。そのページを開いた時class="active"が設定されたタブやそのコンテンツが表示された状態になっています。
Tab1のコンテンツ内容がここに表示されます。
Tab2のコンテンツ内容がここに表示されます。
Tab3のコンテンツ内容がここに表示されます。
※本例では、「Tab 2」がactiveに設定され、デフォルト表示となっています。
Tab1のコンテンツ内容がここに表示されます。
Tab2のコンテンツ内容がここに表示されます。
Tab3のコンテンツ内容がここに表示されます。
今回は、デフォルトの設定は変更せずに、リンク時の# (ハッシュ)を使って制御したいという事です。
動作イメージ
まだ、イメージがつきにくい方は、下記のリンクをクリックしてください。
現在開いているページがブラウザの新たなタブとして表示されます。開いた時のタブの表示状況の変化に注目してください。
リンクURL |
タブの表示状態 |
|---|---|
| entry_bootstrap-direct-tab-link.html | # (ハッシュ)の指定がないため、デフォルトのactiveがそのまま適用され、「Tab 2」が選択された状態 |
| entry_bootstrap-direct-tab-link.html#test1-tab1 | 「Tab 1 (#test1-tab1)」が選択された状態 |
| entry_bootstrap-direct-tab-link.html#test1-tab2 | 「Tab 2 (#test1-tab2)」が選択された状態 |
| entry_bootstrap-direct-tab-link.html#test1-tab3 | 「Tab 3 (#test1-tab3)」が選択された状態 |
実現方法
やりたいことは非常に単純で、ページが表示されたときに、URLのハッシュ値を取得し、それに該当するタブを表示させる処理を行います。
$(document).ready(function() {
// #(ハッシュ)指定されたタブを表示する
var hashTabName = document.location.hash;
if (hashTabName) {
$('.nav-tabs a[href=' + hashTabName + ']').tab('show');
}
});
更に・・・
ページが縦に長く、タブが下の方にある場合、目的のタブペインが最前面になったとしても、タブ自体が画面外にあってはユーザが分かりにくいときもあるので、適切な位置までスクロールしてあげると尚良いのではないでしょうか。
$(document).ready(function() {
var hashTabName = document.location.hash;
if (hashTabName) {
// #(ハッシュ)指定されたタブを表示する
$('.nav-tabs a[href=' + hashTabName + ']').tab('show');
// 所定の位置までスクロールする
var tabParent = $("#" + $('.nav-tabs a[href=' + hashTabName + ']').parents('div').attr('id'));
$('html, body').stop().animate({
scrollTop: tabParent.offset().top
}, 500);
}
});