質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Cookie

HTTPにおけるCookieとは、クライアントのウェブブラウザ上に保存された一時的なデータを指します。クライアント側のJavaScriptでも、サーバー側のHTTPヘッダーでもクッキーの読み書き・修正・削除が可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

2868閲覧

タブで出分けているコンテンツのcookieの書換え

cham

総合スコア9

Cookie

HTTPにおけるCookieとは、クライアントのウェブブラウザ上に保存された一時的なデータを指します。クライアント側のJavaScriptでも、サーバー側のHTTPヘッダーでもクッキーの読み書き・修正・削除が可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2017/07/17 06:58

編集2017/07/17 11:17

###前提・実現したいこと
タブでコンテンツを出し分けしており、
かつ、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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/07/17 10:05

質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
guest

回答2

0

ベストアンサー

B.htmlのコードに問題があります。
jQueryでDOMにクリックイベント等を仕込む場合は、DOMの読み込みが完了してから走るようにしてください。
A.htmlはちゃんと出来ているのですが、B.htmlはheadのscriptタグ内でいきなりjQuery依存コードが記述されています。

投稿2017/07/24 03:04

so87

総合スコア764

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

cham

2017/07/25 05:11

ご回答ありがとうございますm(_ _)m ``` <!--B.html--> <html> <head> <script src="../js/jquery-3.1.1.min.js"></script> </head> <body> <a href="A.html#tab2" id="deletecookie" class="list_button">コンテンツBへ</a> <script> $('#deletecookie').click(function(){ $.removeCookie("index", { path: "/" }); }); </script> </body> </html> ``` このように書き換えてみましたが、変化がありませんでした・・・ ご指摘頂いた事は修正できていますでしょうか? 何度も申し訳ございませんが宜しくお願い致します。
so87

2017/07/25 06:28 編集

上記のコードですとcookieを削除しているだけのように思えます。 私の回答では以下のようなコードになります。 <html> <head> <meta charset="UTF-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> </script> <script> $( function (){ $('#deletecookie').on('click', function(){ document.cookie = 'index=2'; //id=tab03をactive化 return true; }); }); </script> </head> <body> <a href="A.html#tab2" id="deletecookie" class="list_button">コンテンツBへ</a> </body> </html> または <html> <head> <meta charset="UTF-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> </script> </head> <body> <a href="A.html#tab2" id="deletecookie" class="list_button">コンテンツBへ</a> <script> $('#deletecookie').on('click', function(){ document.cookie = 'index=2'; //id=tab03をactive化 return true; }); </script> </body> </html>
so87

2017/07/25 06:39 編集

基本的に質問者様のコードそのままに、 index=10がA.htmlに存在しないのでindex=2とし、 jQuery.ready構文でつつむか(今回はその省略形$(function (){}) )、 body閉じ直前のscriptに移動、 としています。 コードは割愛した回答としたかったのですが、 別の方向(cookie削除?)に話が進みはじめたので、 コードでの回答とさせていただきます。
cham

2017/07/27 06:05

コードまで書いてくださり、 色々とおつきあい頂きありがとうございましたm(_ _)m
guest

0

cokkie情報が残ったまま

「残ったまま」がどういった挙動かがわかりませんが、残るのが問題なのであれば削除するコード($.removeCookie("index");)を書かれていみてはいかがでしょう。

【jQueryプラグイン「jquery.cookie.js」でcookieを簡単に扱う | Tips Note by TAM】
https://www.tam-tam.co.jp/tipsnote/javascript/post3109.html

【jquery.cookie.jsの使い方と簡単なサンプルを紹介します|Webpark】
http://weboook.blog22.fc2.com/blog-entry-404.html


localStorage とか使ってみてはいかがでしょう。

【Window.localStorage - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Window/localStorage

【localStorageで複数のデータを保存する | Tips Note by TAM】
https://www.tam-tam.co.jp/tipsnote/javascript/post5978.html

ブラウザを閉じたときに消えたほうがいいなら sessionStorage で。

【Window.sessionStorage - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Window/sessionStorage

投稿2017/07/19 13:03

kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

cham

2017/07/24 02:06

ご回答ありがとうございますm(_ _)m ``` <!--B.html--> <html> <head> <script> $('#deletecookie').on('click', function(){ $.removeCookie("index"); }); </script> </head> <body> <a href="A.html#tab2" id="deletecookie" class="list_button">コンテンツBへ</a> </body> </html> ``` 上記を試しましたが変化がありませんした。 A.htmlでtab03を表示させた後、B.htmlのリンク(コンテンツBへ)からジャンプしても A.htmlはtab03を表示させたままでした。 localStorageは読んでみたのですが、なかなか理解できず 申し訳ございません・・・ もう少し色々試してみます。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問