twitter bootstrap 開いているタブを記憶

2014年10月12日更新 view: 942 view
photoBy: http://blog-imgs-23-origin.fc2.com/s/w/e/sweetscircle/cookie10.jpg

jquery cookie を用意

jqueryと、jquerycookie.jsを読み込んでおく。 https://github.com/carhartl/jquery-cookie

スポンサードリンク

コード

以下のコードをコピペ。

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

たったこれだけで、

  • 選択されたタブが
  • ブラウザを閉じても
  • 記憶されて初期設定

となります。

スポンサードリンク

関連記事

関連カテゴリ

コロ助

web関連の記事や制作系の記事をどんどんまとめていきます。 宜しくお願いします!

ピックアップ

パソコン・ソフトウェア ランキング

12月12日 ( 火 ) にアクセスが多かった記事はこちら!