jQuery Cookie タブ切り替え 開閉状態を保持

jQueryでタブ切り替えを生成し、クッキーで開閉状態を記憶

jquery.cookie.jsを使用。

jQuery

$(function () { var index = 0; // クッキーのindexを取得し読み込み時にオープンする if ($.cookie('index')) { index = $.cookie('index'); $('li').removeClass('selected').eq(index).addClass('selected'); $('article').hide().eq(index).show(); } $('li').click(function() { if (index != $('li').index(this)) { index = $('li').index(this); // タブの内容 $('article').hide().eq(index).fadeIn('fast'); // タブ $('li').removeClass('selected').eq(index).addClass('selected'); // 有効期限は1日(クッキーにはドメインをセットしない、ブラウザを閉じたら初期化) $.cookie('index', index, { expires: 1 }); } }); });

通常版はjQuery タブ切り替えを参照。

CSS

article { display: none; } article.selected { display: block; }

HTML

<ul id="tab"> <li class="selected">タブ 1</li> <li>タブ 2</li> <li>タブ 3</li> <li>タブ 4</li> </ul> <div id="detail"> <article class="selected"><p>タブ 1の内容</p></article> <article><p>タブ 2の内容</p></article> <article><p>タブ 3の内容</p></article> <article><p>タブ 4の内容</p></article> </div>

サンプル

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。主にLAPP環境でPHPを書いています。最近はjQueryで遊んでいます。
※動作確認について