jquery.cookieを利用しての表示

このQ&Aのポイント
  • jquery.cookieを使用して、クリックしたリンクによって表示内容を切り替える方法
  • リンクをクリックした際に、ページが移動する前に表示内容が切り替わる方法
  • ID1、ID2、ID3のエリアを切り替えるリンクを作成し、jquery.cookieを使ってクッキーを保存する
回答を見る
  • ベストアンサー

jquery.cookieを利用しての表示

cookieを使用した表示内容の変更を行おうとしています たとえば <a href="javascript:void(0);" onclick="Display('no1')">ID1</a> を押したら <div id="ID1"><p>これはID1のエリアです</p></div> が出てきて、cookieが残っている限り上記文章が表示されている 以前の質問に載っていたソースを使用し、製作しようと思っていたのですが リンク部分を下記のようにすると <a href="javascript:void(0);" onclick="Display('no1')">ID1</a> ↓ <a href="next.html" onclick="Display('no1')">ID1</a> 当たり前といえば当たり前なのですが リンクをクリックした際に、切り替わったエリアが一瞬表示し ページに移動してしまいます 私としてはページが移動した後に切り替わってほしいのですが なかなか上手くいきません 何か良い方法はないでしょうか・・・ 下記元ソースになります <script type="text/javascript"> function Display(no){ switch(no){ case 'no1': $("#ID1").show(); $("#ID2").hide(); $("#ID3").hide(); $.cookie('area',no,{expires:1}); break; case 'no2': $("#ID1").hide(); $("#ID2").show(); $("#ID3").hide(); $.cookie('area',no,{expires:1}); break; case 'no3': $("#ID1").hide(); $("#ID2").hide(); $("#ID3").show(); $.cookie('area',no,{expires:1}); break; } } $(function($){ if($.cookie('area')){ Display($.cookie('area')); }else{ Display('no1'); } }); </script> <h5><a href="javascript:void(0);" onclick="Display('no1')">ID1</a></h5> <h5><a href="javascript:void(0);" onclick="Display('no2')">ID2</a></h5> <h5><a href="javascript:void(0);" onclick="Display('no3')">ID3</a></h5> <div id="ID1"><p>これはID1のエリアです</p></div> <div id="ID2"><p>これはID2のエリアです。</p></div> <div id="ID3"><p>これはID3のエリアです。</p></div>

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

ページを切り替えた後、next.htmlのwindow.onloadで表示する処理を行ってください。

satoken1326
質問者

お礼

回答ありがとうございます! さっそくやってみます。

関連するQ&A

  • onclickで表示/非表示させている動きに、別ページからリンクさせるには

    JavaScript初心者です。 A.htmlを作成し、リンクをクリックするとidとnumberを呼び出すことで、同じhtml内に存在する3つのページが1つだけ表示されるように、cssとJavaScriptで表示/非表示させています。 【JavaScript】 function Page(id, nu){ Num = new Array ('01', '02', '03'); for (i=0; i<3; i++) { if(Num[i] == num){ document.getElementById(id + Num[i]).style.display = "block"; } else { document.getElementById(id + Num[i]).style.display = "none"; } }; } 【CSS】 #test01 {display:block;} #test02 {display:none;} #test03 {display:none;} 【html】 <a href="javascript:void(0);" onclick="Page('test','01')">link1</a> <a href="javascript:void(0);" onclick="Page('test','02')">link2</a> <a href="javascript:void(0);" onclick="Page('test','03')">link3</a> <div id="test01">  ・・・ </div> <div id="test02">  ・・・ </div> <div id="test03">  ・・・ </div> このとき別のhtml(B.html)から、A.htmlのid="test02"が表示された状態にリンクを作成することはできるのでしょうか? 恐れ入りますがよろしくお願い致します。

  • jquery.cookie.js を使って縦に複数並んでいるボックス要

    jquery.cookie.js を使って縦に複数並んでいるボックス要素の位置をcookie保存したい。 縦に複数並んでいるボックス要素を矢印ボタンをクリックして、上下に順番を入れ替えるスクリプトがあります。 このボックス要素を矢印で動かした際に各ボックスの位置を cookie保存して、再訪した際にcookieから前回の並び順を読み込みたいのですが、jquery.cookie.js への保存・読み込み方法をご教授いただけますでしょうか? また、cookie に加えて、ボックス要素の並びが変わる際の animate の付け方もご教授をお願いします。 イメージとしては、mixiの「最新のつぶやき」「最新の日記」などのカテゴリタイトル部分の右端に「↑」「↓」の画像リンクがあり、それをクリックするとカテゴリのボックスがクリックされた矢印方向へエフェクトと共に移動し、そこにあったカテゴリと入れ替わる動きをイメージしています。 ■ソースサンプル <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp" /> <title></title> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> var list=new Array(); //前後関係の番号を入れる 隣がいない場合0 list[1]={before:0,after:2}; list[2]={before:1,after:3}; list[3]={before:2,after:0}; function blkUp(nm){ var mae = list[nm].before; if(mae!=0){ var maebefore = list[mae].before; var maeafter = list[mae].after; $("#category"+mae).before($("#category"+nm)); list[mae].before=nm; list[mae].after=list[nm].after; list[nm].before=maebefore; if(list[nm].after!=0){ list[(list[nm].after)].before = mae; } list[nm].after=mae; } } function blkDown(nm){ var tugi = list[nm].after; if(tugi!=0){ var tugibefore = list[tugi].before; var tugiafter = list[tugi].after; $("#category"+tugi).after($("#category"+nm)); list[tugi].before=list[nm].before; list[tugi].after=nm; if(list[nm].before!=0){ list[(list[nm].before)].after =tugi; } list[nm].before=tugi; list[nm].after=tugiafter; } } </script> </head> <body> <div id="category1"> <a href="javascript:void(0);" onclick="blkUp(1);">△</a><a href="javascript:void(0);" onclick="blkDown(1);">▽</a> ああああああああああ </div> <div id="category2"> <a href="javascript:void(0);" onclick="blkUp(2);">△</a><a href="javascript:void(0);" onclick="blkDown(2);">▽</a> いいいいいいいいいい </div> <div id="category3"> <a href="javascript:void(0);" onclick="blkUp(3);">△</a><a href="javascript:void(0);" onclick="blkDown(3);">▽</a> うううううううううう </div>

  • 常にひとつだけ詳細表示する!の回答なのだけれど

    <html> <head> <style> .show {display:block;} .hide {display:none;} </style> <script> function yomu(n){ oj=document.getElementById('a').getElementsByTagName('DIV'); for(var i in oj) oj[i].className=(i==n)?'show':'hide'; } </script> </head> <body> <div id="a"> <a href="#" onClick="yomu(0)">A</a><br> <div class="hide">Aの詳細</div> <a href="#" onClick="yomu(1)">B</a><br> <div class="hide">Bの詳細</div> <a href="#" onClick="yomu(2)" >C</a><br> <div class="hide">Cの詳細</div> </div> </body> </html>

  • リンク押下でタグを書き換えたい

    リンクが複数あって、押したリンク文字だけ<span></span>のみにしたいと 思っています。また対応するdivタグのdisplay属性も書き換えたいです。 とりあえず思いついたのは以下の方法なのですが、冗長ですし、 リンクの数が増えた場合に足していくのが大変です。 もっとシンプルに書く方法がないものでしょうか。 ご助言ください。 <html> <body> <script> function change(spanid,divid,menuName){ document.getElementById('menu1').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu1','div1','メニュー1')\">メニュー1</a>"; document.getElementById('div1').style.display="none"; document.getElementById('menu2').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu2','div2','メニュー2')\">メニュー2</a>"; document.getElementById('div2').style.display="none"; document.getElementById('menu3').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu3','div3','メニュー3')\">メニュー3</a>"; document.getElementById('div3').style.display="none"; document.getElementById(spanid).innerHTML = menuName; document.getElementById(divid).style.display="block"; } </script> <ul> <li><span id="menu1">メニュー1</span></li> <li><span id="menu2"><a href="javascript:void(0)" onclick="change('menu2','div2','メニュー2')">メニュー2</a></li> <li><span id="menu3"><a href="javascript:void(0)" onclick="change('menu3','div3','メニュー3')">メニュー3</a></li> </ul> <div id="div1"> test1 </div> <div id="div2" style="display:none"> test2 </div> <div id="div3" style="display:none"> test3 </div> </body> </html>

  • jQueryでcookie 追加書き込み

    jQueryでcookieに追加書き込みをしたいのですが、どうやってもわかりません。 ここからクッキを追加書き込みを実現したいのですが、 どうやっても頭が回らず困って、混乱気味になっています。 誰か助けてください! おねがいいたします! <!DOCTYPE html> <html lang="jp"> <head> <meta charset="utf-8"> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.7.1");</script> <script type="text/javascript" src="jquery.cookie.js"></script> <script type="text/javascript"> //入力された値をCookieに保持する function cookie(){ $.cookie("cookie", $("#cookieValue").val()); $("#result").html($.cookie("cookie")); } //現在のCookieの値を出力 $(function() { $("#result").html($.cookie("cookie")); }); </script> <title></title> </head> <body> <input id="cookieValue" type="input"> <a href="index.html" onclick="cookie()">クッキー</a> <p><span id="result"></span></p> </body> </html>

  • jabascriptの表示・非表示について

    初心者です。 このタグでは、最初から「ここを表示する」が表示されるのですが、最初は表示されずに、「表示」ボタンを押すと初めて表示されるようにするにはどのようにすればいいのでしょうか。。 <p> <a href="#" id="link_view2" onClick="toggle_view2();return false;" style="display:none;">表示</a> <a href="#" id="link_hidden2" onClick="toggle_hidden2();return false;">非表示</a> </p> <div id="area_hoge2"> <p>ここを表示する</p> </div> <script language="JavaScript" type="text/javascript"> <!-- var elem2_1 = document.getElementById("area_hoge2"); var elem2_2 = document.getElementById("link_view2"); var elem2_3 = document.getElementById("link_hidden2"); function toggle_view2() { elem2_1.style.display = ""; elem2_2.style.display = "none"; elem2_3.style.display = ""; } function toggle_hidden2() { elem2_1.style.display = "none"; elem2_2.style.display = ""; elem2_3.style.display = "none"; } --> </script> 参考 http://pentan.info/javascript/sample/view_hidden.html 詳しい方お教えください<m(_ _)m>

  • firefoxだけ、javascriptが思うように動作しません。

    firefoxだけ、javascriptが思うように動作しません。 下記、html記述です。 <a href="javascript:void(0);" onclick="show1()">tab1</a> <a href="javascript:void(0);" onclick="show2()">tab2</a> <a href="javascript:void(0);" onclick="show3()">tab3</a> <div id="page1">page1</div> <div id="page2">page2</div> <div id="page3">page3</div> 下記、javascript記述です。 function show1(){ page1.style.display="block"; page2.style.display="none"; page3.style.display="none"; } function show2(){ page1.style.display="none"; page2.style.display="block"; page3.style.display="none"; } function show3(){ page1.style.display="none"; page2.style.display="none"; page3.style.display="block"; } tab1をクリックすると、page1のみ表示 tab2をクリックすると、page2のみ… という風に動作させたいです。 IE、opera、chromeでは動作しますが、 firefoxだけ全く動作しません。 どのように修正すれば動くようになるでしょうか? javascriptについては初心者なので、 基本的なところから間違っているのかもしれませんが、 ご回答よろしくお願いします。

  • jQuery.jTagging.jsを使った入力

    現在、jQuery.jTagging.jsを使った入力支援を 以下のサイトを参考に作っています。 http://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_other/jtagging.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB 上記サイトの例のようにテキストボックスだと、問題なく動作するのですが テキストエリアにすると動作しません。 以下、上記サイトを基にして、テキストエリアでテストしたコードです。 <script type="text/javascript"> $(function() { $("#TagTextArea1").jTagging($("#TagDiv1"), ","); }); </script>   ・   ・   ・ <h2>例1</h2> <p>your tags: <textarea id="TagTextArea1"></textarea> カンマ区切り</p> <div id="TagDiv1" class="box"> <a href="#" onclick="return false;">javascript</a>&nbsp;&nbsp; <a href="#" onclick="return false;">jquery</a>&nbsp;&nbsp; <a href="#" onclick="return false;">tag</a>&nbsp;&nbsp; <a href="#" onclick="return false;">cool</a> </div> jQuery.jTagging.jsを使用した入力支援は テキストエリアでは、実装することは不可能なのでしょうか?

  • div要素をランダムに表示させたい

    お世話になります。Javascriptについて質問させていただきます。 拙い説明で分かりにくいかと思いますが、ご教授いただけたらと思います。 javascriptとcssを使用して、ページをリロードする度に、divの要素をランダムに表示させるようにしたいと考えています。 ランダムで表示させるにはfunction test(no)関数のどこかにランダムで値を取得できるようにする必要があると思っているのですが、上手く設定ができずに悩んでいます。 ご回答頂けたら幸いです。 ■ html <body onLoad="test(no)"> <div id="link"> <div class="link01"> <p>文章1</p> </div> <div class="link02"> <p>文章2</p> </div> <div class="link03"> <p>文章3</p> </div> </div> <ul> <li><a href="#" onclick="showChanger(1);">リンク1</a></li> <li><a href="#" onclick="showChanger(2);">リンク2</a></li> <li><a href="#" onclick="showChanger(3);">リンク3</a></li> </ul> ■javascript function test(no){ var parenObj=document.getElementById("link"); for(var i in parenObj.childNodes){ var childObj=parenObj.childNodes[i]; if(childObj.tagName=="DIV"){ if(no == 1){ if(childObj.className=="link01"){ childObj.style.display = "block"; }else{ childObj.style.display = "none"; } } if(no == 2){ if(childObj.className=="link02"){ childObj.style.display = "block"; }else{ childObj.style.display = "none"; } } if(no == 3){ if(childObj.className=="link03"){ childObj.style.display = "block"; }else{ childObj.style.display = "none"; } } } } } ■css .link01 { display:block; margin-bottom:10px; } .link02 { display:none; margin-bottom:10px; } .link03 { display:none; margin-bottom:10px; }

  • jQueryのタブにスクロールバーをつけたい

    jQueryのタブにスクロールバーをつけたい jQueryの「ui.tabs.js」を使ってタブを制作し、「jquery.cookie.js」でタブの内容を記憶し。 さらに、そのタブの中身が設定した枠を超えると「jScrollPane.js」を使って横にスクロールバーがでるようにしたいのですがうまくいきません。 <script src="./js/jquery-1.2.6.js" type="text/javascript"></script> <script src="./js/jquery.cookie.js" type="text/javascript"></script> <script src="./js/ui.core.js" type="text/javascript"></script> <script src="./js/ui.tabs.js" type="text/javascript"></script> <script src="./js/jScrollPane.js" type="text/javascript"></script> <script src="./js/jquery.mousewheel.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $('#container1 > ul').tabs({ event: 'click' ,cookie: { expires: 30 } , cache: true}); $('#fra_sl').jScrollPane({scrollbarWidth:13, scrollbarMargin:9}); }); </script> <body> <div id="container1"> <ul> <li id="tab1"><a href="#tab_categry">タブ1</a></li> <li id="tab2"><a href="#tab_all">タブ2</a></li> </ul> <div id="pane1"> <div id="tab_categry"> <p>中身1(省略)</p> </div> <div id="tab_all"> <p>中身2(省略)</p> </div> </div> </div> </body> 以前同じような質問をされていた方がいたのでそちらも参考にして試してみたのですが→http://okwave.jp/qa/q4819862.html javascriptは初心者なものでよくわかりませんでしたorz どなたかわかる方がいましたら教えてもらえないでしょうか??

専門家に質問してみよう