Bootstrapを使ったシンプルなタブメニューの実装方法のご紹介です。
今回はタブメニューの基本的な設置方法と合わせて、jQuery Cookieを利用して現在閲覧しているタブの情報をCookieに保存する方法も合わせて紹介させていただきます。
これにより、ページをリロードしたり離脱して戻ってきた場合でもタブの情報を保持できるようになります。
Bootstrapのタブメニュー実装
まずはBootstrapによるタブメニューを用意します。bootstrap-tab.js ファイルの設置
jqueryファイルと一緒にbootstrap-tab.jsを設置します。|
1 2 3 4 |
<link href="./assets/css/bootstrap.css" rel="stylesheet"> <script src="./jquery.min.js"></script> <script src="./asset/bootstrap-transition.js"></script> <script src="./asset/bootstrap-tab.js"></script> |
bootstrap-tab.jsがタブメニューに必要なモジュールです。
bootstrap-transition.jsはタブ切り替え時のエフェクト（フェードインなど）を行うために設置しています。
※無くてもタブメニュー自体は動きます。
HTML側の記述例
今回は、ほぼBootstrapのサンプル通りの記述をしています。|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<div class="clearfix"> <ul id="myTab" class="nav nav-tabs"> <li class="active"><a href="#tab01" data-toggle="tab">タブ1</a></li> <li><a href="#tab02" data-toggle="tab">タブ2</a></li> <li><a href="#tab03" data-toggle="tab">タブ3</a></li> <li><a href="#tab04" data-toggle="tab">タブ4</a></li> <li><a href="#tab05" data-toggle="tab">タブ5</a></li> </ul> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade in active" id="tab01"> タブ1の内容 </div> <div class="tab-pane fade in" id="tab02"> タブ2の内容 </div> <div class="tab-pane fade in" id="tab03"> タブ3の内容 </div> <div class="tab-pane fade in" id="tab04"> タブ4の内容 </div> <div class="tab-pane fade in" id="tab05"> タブ5の内容 </div> </div> </div> |
ただしこのままだと、ページをリロードしたり離脱した場合はタブは初期状態（class=”active”が記述されているタブ）に戻ります。
タブの情報を Cookie に保存
ページをリロードしても、選択されたタブがそのままの状態で表示されるようにjQuery Cookieを併用します。jQuery Cookie のダウンロード
以下のページよりjQuery Cookieのファイルをダウンロードします。jQuery Cookie
jQuery Cookie ファイルの設置
これをbootstrap-tab.jsなどのファイル近くに合わせて設置します。まとめて書くとこんな感じです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<link href="./assets/css/bootstrap.css" rel="stylesheet"> <script src="./jquery.min.js"></script> <script src="./asset/bootstrap-transition.js"></script> <script src="./asset/bootstrap-tab.js"></script> <script src="./jquery.cookie.js"></script> <script type="text/javascript"> $(function() { if($.cookie("openTag")){ //一旦すべての active を外す $("a[data-toggle="tab"]").parent().removeClass("active"); $("a[href=#" + $.cookie("openTag") +"]").click(); //$("a[href=#" + $.cookie("openTag") +"]").parent().addClass("active"); } $("a[data-toggle="tab"]").on("shown", function (e) { var tabName = e.target.href; var items = tabName.split("#"); //クッキーに選択されたタブを記憶 $.cookie("openTag",items[1], { expires: 700 }); }); }); </script> |
参考ページ
http://www.matomater.com/439/
Bootstrap タブメニューのサンプル
どのような動きになるか？のデモページを用意しています。ページをリロードしても、選択されたタブの情報を引き続き表示しています。
Bootstrap タブメニューのデモ
コメント