jQuery Cookie を使ってタブ切り替え状態を保持する方法

2014/12/17 2017/07/12

以前作成したタブ切り替えのスクリプトを拡張し、リロードや別ページから戻った場合でもアクティブになっているタブをアクティブのままにしておく、ということがしたくなったのですが、どうやらjQuery Cookieというライブラリを使えば出来そうだったので、実際にやってみました。

jQuery Coonkie

ダウンロード

carhartl/jquery-cookie GitHub
https://github.com/carhartl/jquery-cookie

上記URLから、jquery.cookie.js をダウンロードします。

「Download ZIP」をクリックし、zipファイルをダウンロード。
解凍した [src] ディレクトリ以下に jquery.cookie.js は格納されています。

HTML ヘッダ

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="/js/jquery.cookie/jquery.cookie.js"></script>

1 2	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="/js/jquery.cookie/jquery.cookie.js"></script>

↑ 読み込ませます。必ずjQuery本体よりもあとに読み込ませてください。

Script

以前書いたスクリプトを拡張して書いてみます。

詳細はこちらから。

HTML

<ul id="tab">
    <li>タブ１</li>
    <li>タブ２</li>
    <li>タブ３</li>
    <li>タブ４</li>
    <li>タブ５</li>
</ul>


<div class="tabContents">
    <ul class="listTitle">
        <li>タブ１内容</li>
    </ul>
</div>

<div class="tabContents">
    <ul class="listTitle">
        <li>タブ２内容</li>
    </ul>
</div>

<div class="tabContents">
    <ul class="listTitle">
        <li>タブ３内容</li>
    </ul>
</div>

<div class="tabContents">
    <ul class="listTitle">
        <li>タブ４内容</li>
    </ul>
</div>

<div class="tabContents">
    <ul class="listTitle">
        <li>タブ５内容</li>
    </ul>
</div>

</ul>

</ul>

</div>

</ul>

</div>

</ul>

</div>

</ul>

</div>

</ul>

</div>

CSS

ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#tab li{
    padding: 10px;
    background-color: #eee;
    border: 1px solid #ccc;
    float: left;
}

#tab li.chose{
    background-color: #fff;
}

.hide{
    display: none;
}

ul{

margin: 0;

padding: 0;

list-style-type: none;

}

#tab li{

padding: 10px;

background-color: #eee;

border: 1px solid #ccc;

float: left;

}

#tab li.chose{

background-color: #fff;

}

.hide{

display: none;

}

JavaScript

「クッキー保存されている or いない場合」及び「クリックされた場合」のスクリプトが必要になります。
タブ切り替え処理は共通化できるので、function() にまとめてみました。

<script>
$(function() {
    // クッキー保存されている or いない場合
    if ($.cookie('num')) {
        num = $.cookie('num');  ←★1
    } else {
        num = 0;    // ←★2
    }

    // タブ処理
    tabSwitching(num);


    // クリックされた場合
    $('#tab li').click(function() {
        // クリックされた <li> のインデックス番号を取得
        num = $('#tab li').index(this);

        // タブ処理
        tabSwitching(num);


        // クッキーを保存
        // 有効期限は1日(ブラウザを閉じたら初期化)
        $.cookie('num', num, {expires: 1});     // ←★3
    });


    // タブ切り替え処理
    function tabSwitching( num ){
        // リストに設定されている class="chose" を削除
        $('#tab li').removeClass('chose');

        // 前回クリックされていた <li> に class="chose" 追加
        $('#tab li').eq(num).addClass('chose');

        // tabContents に class="hide" を追加
        $('.tabContents').addClass('hide');

        // 取得したインデックス番号の class="hide" を削除
        $('.tabContents').eq(num).removeClass('hide');
    }
});
</script>

$(function() {

// クッキー保存されている or いない場合

if ($.cookie('num')) {

num = $.cookie('num'); ←★1

} else {

num = 0; // ←★2

}

// タブ処理

tabSwitching(num);

// クリックされた場合

$('#tab li').click(function() {

// クリックされた <li> のインデックス番号を取得

num = $('#tab li').index(this);

// タブ処理

tabSwitching(num);

// クッキーを保存

// 有効期限は1日(ブラウザを閉じたら初期化)

$.cookie('num', num, {expires: 1}); // ←★3

});

// タブ切り替え処理

function tabSwitching( num ){

// リストに設定されている class="chose" を削除

$('#tab li').removeClass('chose');

// 前回クリックされていた <li> に class="chose" 追加

$('#tab li').eq(num).addClass('chose');

// tabContents に class="hide" を追加

$('.tabContents').addClass('hide');

// 取得したインデックス番号の class="hide" を削除

$('.tabContents').eq(num).removeClass('hide');

}

});

</script>

並んでいるダブのインデックス番号を取得し、変数 numに代入し、対応するインデックス番号の内容を表示させる、という処理を行っています。

インデックス番号は基本的に 0番からスタートします。
この場合「タブ１」がインデックス番号「0番」となります。

★1 箇所で、クッキーが保存されていれば、その内容をインデックス番号用変数（num）に代入します。

★2 箇所で 0 を代入しているのは、全く初めてのアクセスの場合や、クッキーをクリアされたなどの場合にデフォルトで表示させるインデックス番号を 0 とするためです。
なので、1でも2でも構いません。

★3 箇所で、取得したインデックス番号をクッキーに保存しています。

仕様

最後に、クッキーをセットする箇所の第三引数の仕様です。

$.cookie('num', num, {
    expires: 2,
    path: '/',
    domain: 'wataame.sumomo.ne.jp',
    secure: true
});

$.cookie('num', num, {

expires: 2,

path: '/',

domain: 'wataame.sumomo.ne.jp',

secure: true

});

expires: 2,　：　num の内容は、2日後に自動的にブラウザから消去
path: '/',　：　ルートディレクトリ(/)以下の全てのページで num が読み込める
domain: 'wataame.sumomo.ne.jp',　：　num は、指定したドメイン以下でのみ、読み込める
secure: true　：　https環境でのみ、numに値が保存される

判ってしまえば、かなり簡単に導入できてしまいました。
ライブラリって素敵。

-Javascript,jQuery
-javascript, jquery, jquery.cookie, js, タブ, タブ切り替え

: 【JS】リセットボタン押下時にフォーム入力値・選択値をリセット、クリアする方法

検索条件などをフォームに記述・選択後、GET方式で引き継いでいる時、HTMLにある普通のリセットボタンではデータは初期化されません。そこで、jQueryを使ってデータを初期化するというイメージのスクリプトを作ってみましたのでご紹介。