スポンサード

Bootstrap を使ったシンプルなタブメニューの実装方法です。

今回はタブメニューの基本的な設置方法と合わせて、jQuery Cookie を利用して現在閲覧しているタブの情報を Cookie に保存する方法も合わせて紹介させていただきます。

これにより、ページをリロードしたり離脱して戻ってきた場合でも、タブの情報を保持できるようになります。

Bootstrap のタブメニュー実装

まずは Bootstrap によるタブメニューを用意します。

bootstrap-tab.js ファイルの設置

jquery ファイルと一緒に、bootstrap-tab.js を設置します。

<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 のサンプル通りの記述をしています。

<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 ファイルの設置

これを bootstrap-tab.js などのファイル近くに合わせて設置します。

まとめて書くとこんな感じです。

<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>

Bootstrap タブメニューのサンプル

どのような動きになるか？のデモページを用意しています。

ページをリロードしても、選択されたタブの情報を引き続き表示しています。
Bootstrap タブメニューのデモ

スポンサード