jQuery上下連動タブとcookieで状態を保存
cookieで
・タブの動きのを記憶
・特定のクラスの差し替えを記憶
この要素が必要でしたので色々調べた。。。
下記の状態で無事に動きました。
jquery.cookie.jsを使用
n = ($.cookie('opened')); m = ($.cookie('opened2')); if (n > 0 || m > 1) { $('.tab').each(function(){ $('li',this).removeClass('current').eq(n).addClass('current'); }); $('#tabBottom div').removeClass().addClass('bg'+m); $('.tabCnts .tabCnt').hide().eq(n).show(); } $('.tab li').click(function() { var num = $(this).parent().children('li').index(this); var bgnum = $(this).parent().children('li').index(this)+1; $('.tab').each(function(){ $('li',this).removeClass('current').eq(num).addClass('current'); }); $('#tabBottom div').removeClass().addClass('bg'+bgnum); $('.tabCnts .tabCnt').hide().eq(num).show(); // 有効期限は1日 $.cookie('opened', num,{ expires: 1 }); $.cookie('opened2', bgnum,{ expires: 1 }); });
参考サイト
http://nakazilab.com/top-and-bottom-tab/
http://html-five.jp/350/
http://php.o0o0.jp/article/jquery-cookie_tab
http://javascript.webcreativepark.net/library/jquery-cookie
http://www.favorite-labo.org/view/306?continue=1
この投稿へのトラックバック
トラックバックはありません。