jQueryを使用して、開いたタブを記憶させる方法

目次

1.実装概要

JavaScriptで開いたタブを記憶させて、ブラウザを閉じたり、新規タブで開きなおしても

前回開いたタブがフォーカスされるようにしたい場合に今回の実装が役に立つかと思います。

 

実装内容を簡単に説明しますと、

htmlが読み込まれた後に、openTagというキーのcookieが存在したら一旦activeに設定されているタブのactive状態を破棄して、

openTagキーに入っている値のタブをクリックしてあげます。

 

そして、タブを切り替える毎に下記のコードが実行されるので開かれたタブのhref属性の値がクッキーに保存されます。

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {});

 

そうすることでタブの状態がクッキーで管理されます。

 

また、openTagキーが存在しない場合はそのまま初期設定が適用されるのであらかじめhtml記述している設定内容でタブがフォーカスされます。

 

2.実装方法

2-1. 使用ライブラリ

・bootstrap 3.3.7 ※タブのデザインに利用しているため特に必要なし。

・jquery 3.2.1

・jquery.cookie.js　https://github.com/carhartl/jquery-cookie

2-2. 実装例

sample.html

・・・省略

<ul class="nav nav-tabs">

<li class="nav-item"><a href="#a_content"

class="nav-link bg-info" data-toggle="tab">a</a></li>

<li class="nav-item"><a href="#b_content"

class="nav-link bg-info" data-toggle="tab">b</a></li>

<li class="nav-item"><a href="#c_content"

class="nav-link bg-info" data-toggle="tab">c</a>

</li>

・・・省略

 

tab.js

$(function() {

 

    if($.cookie("openTag")){

        // 一旦すべての active を外す

        $('a[data-toggle="tab"]').parent().removeClass('active');

        $('a[href="#' + $.cookie("openTag") +'"]').click();

    }

 

    $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {

        var tabName = e.target.href;

        var items = tabName.split("#");

        // クッキーに選択されたタブを記憶

        $.cookie("openTag",items[1], { expires: 1800 });

    });

});