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】クーポン系サイトによくある「カウントダウンタイマー」をjQueryを使って設置してみる

「グルーポン」や「シェアリー」など、クーポン系サイトでよく利用されているような、カウントダウンしていくタイマーが必要になったので、その設置方法の紹介です。今回は「jQuery Countdown」というライブラリを使用します。

: 「クリックしたらツールチップを表示するスクリプト」のバージョン2を作ってみた

以前作成した「クリックしたらツールチップを表示するスクリプト」がQiitaでいい感じに改造されていたのに影響を受け、もう少しだけ上手に書いた(と思う) バージョン2がようやく出来上がったので晒してみたいと思います。

: 【JS】ラジオボタンの選択値によってテーブルの内容を変更するスクリプトをjQueryで作成する

ラジオボタンの選択値によって指定したテーブルのTRタグ（無論DIVでも）の表示・非表示を変更し、内容を操作するJavascript（jQuery）の紹介です。

: 【JS】定義リスト/記述リスト（dl, dd）タグの個数をカウントするスクリプトをjQueryで作ってみた

このブログの一番人気記事である「三文字略語」のページには現在何個の略字を載っけたのか数えたくなったのですが、いちいち自分で数えるのもバカらしく感じたのでプログラムにやらせてみようと作ってみました。

: jQueryで日数計算をしてみる

娘の百日膳を行うにあたって「誕生日からの100日目っていつなんだ？」というのを調べる機会があったのですが、せっかくなので勉強がてら自分でも組んでみようと思い、日数計算できるスクリプトをjQueryを利用して作ってみたので公開してみたいと思います。

PREV: 【Photoshop】ラインツールでお手軽に矢印を描く方法
NEXT: amazonで購入した商品を返品する方法

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

jQuery Coonkie

ダウンロード

HTML ヘッダ

Script

HTML

CSS

JavaScript

仕様

【DIY】2x4や1x4など、SPF材サイズ早見表 (562,291)

【知識】電話番号の+81の意味と固定電話・携帯電話番号の書き方 (277,575)

TPPやLCCなど、時事や普段使っている「アルファベット略語」を集めてみた (255,032)

【歴史】江戸幕府歴代将軍一覧 (142,980)

【知識】牛肉の部位「おっぱい」は本当に乳房なのかが気になったので調べてみた (128,969)

【Excel】ダブルクォーテーションでデータを囲んだCSVファイルの作成方法 (128,047)