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>
サンプル
