※ ChatGPTを利用し、要約された質問です(原文:jquery.cookieを利用しての表示)
jquery.cookieを利用しての表示
このQ&Aのポイント
jquery.cookieを使用して、クリックしたリンクによって表示内容を切り替える方法
リンクをクリックした際に、ページが移動する前に表示内容が切り替わる方法
ID1、ID2、ID3のエリアを切り替えるリンクを作成し、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>
お礼
回答ありがとうございます! さっそくやってみます。