###前提・実現したいこと
タブでコンテンツを出し分けしており、
かつ、jquery.cookie.jsにてコンテンツを記憶させています。(A.html)
別ページ(B.html)からアクセスした際、目的のタブがアクティブになった状態で
表示したいのですが、cokkie情報が残ったままになってしまいます。
###該当のソースコード
<!--A.html--> <html> <head> <script> $(function(){ var index = 0; if ($.cookie('index')) { index = $.cookie('index'); $('.tab_links li').removeClass('active').eq(index).addClass('active'); $('article').hide().eq(index).show(); } $('.tab_links li').click(function() { if (index != $('.tab_links li').index(this)) { index = $('.tab_links li').index(this); // タブの内容 $('article').hide().eq(index).fadeIn('fast'); // タブ $('.tab_links li').removeClass('active').eq(index).addClass('active'); // 有効期限は1日(クッキーにはドメインをセットしない、ブラウザを閉じたら初期化) $.cookie('index', index, { path: '/', expires: 1 }); } }); }); </script> </head> <body> <ul class="tab_links"> <li id="tab1" class="active">コンテンツA</li> <li id="tab2">コンテンツB</li> <li id="tab3">コンテンツC</li> </ul> <div id="contents"> <article id="tab01" class="active"> ここにはコンテンツAの内容が入ります。 ダミーテキストです。 </article> <article id="tab02"> ここにはコンテンツBの内容が入ります。 ダミーテキストです。 </article> <article id="tab03"> ここにはコンテンツCの内容が入ります。 ダミーテキストです。 </article> </div> </body> </html>
<!--B.html--> <html> <head> <script> $('#deletecookie').on('click', function(){ document.cookie = 'index=10'; }); </script> </head> <body> <a href="A.html#tab2" id="deletecookie" class="list_button">コンテンツBへ</a> </body> </html>
###試したこと
B.htmlのリンクを押すと、cookieを書き換えるようにすれば
リセットされると思ったのですが、うまくいきませんでした。
###補足情報(言語/FW/ツール等のバージョンなど)
jquery-3.1.1.min.js
回答2件
あなたの回答
tips
プレビュー