- ベストアンサー
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"が表示された状態にリンクを作成することはできるのでしょうか？ 恐れ入りますがよろしくお願い致します。
- tea_spoon
- お礼率88% (8/9)
- JavaScript
- 回答数3
- ありがとう数7
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
簡易版ですけど、 A.html <html> ----- <style type="text/css"> #test01 {display:block;} #test02 {display:none;} #test03 {display:none;} </style> <script type="text/javascript" charset="utf-8"> <!-- window.onload = function(){ var url_str = window.location.href; // 下は"?"の文字でurl_strを分割してます。 var parm=url_str.split("?"); if (parm.length>1){ // 下は","の文字でparmを分割してます。 Page(parm[1].split(",")[0],parm[1].split(",")[1]); } } function Page(id, num){ var 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"; } } } // --> </script> <body> <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> </body> </html> としておいて、 他htmlからは <a href="A.html?test,01">link1</a> <a href="A.html?test,02">link2</a> <a href="A.html?test,03">link3</a> でリンクする。
その他の回答 (2)
- fujillin
- ベストアンサー率61% (1594/2576)
対象がタブ構成の表示になっているけれど、似たようなことについて書いてあるサイトがありました。 ◇他ページから直接タブにアクセスする http://archiva.jp/web/javascript/tab-menu2.html 要素の表示方法が質問者様のものとタブ構成とで違う点はありますが、考え方は似ているので参考になるかと思います。 「考え方」のところで tab.showpage(tab.setup.tabs[…]) みたいになっているところを、必要なdivを表示する処理にしといてあげて、window.onloadなどで実行するようにしておけばよろしいかと。 （hashがない場合はdefaultのdivを表示する）
お礼
locationのプロパティであるhashは何か使えそうだと感じてはいたのですが、その方法がわかったので大変感謝します。ありがとうございました！
- yambejp
- ベストアンサー率51% (3827/7415)
たとえば・・・ #test02などアンカーを付加しておき、 cssの:targe疑似クラスで処理するとか・・・。 （それだとIEは全滅だろうけど） もう少しきちんとやるならパラメータわたししたlocation.searchを 解析する処理をいれる。 Bからの処理とはいえ、A側にあらかじめ設定がひつよう
お礼
早々に回答頂きありがとうございました。できないわけはなさそうなのですね。
関連するQ&A
- リンク押下でタグを書き換えたい
リンクが複数あって、押したリンク文字だけ<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>
- ベストアンサー
- JavaScript
- onclick属性に外部jsと外部cssの記載方法
表題の通りclickイベントを付与したいのですが、記載方法が分からなくて困っています。 例） <div id="sample1"> <a href="javascript:void(0);" onclick="document.getElementById('sample2').style.display='block'; document.getElementById('sample1').style.display='none'">ぴーしー</a> <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </div> <div id="sample2" style="display:none"> <a href="javascript:void(0);" onclick="document.getElementById('sample2').style.display='none'; document.getElementById('sample1').style.display='block'">もばいる</a> </div> 上記のままだと更新ボタンを押さないと反映されなかったので、onclick属性にjquery.mobileを付与したいと思いまして。toggle,appendToなども試しましたが、挙動がおかしかったので、有志の方、代換え方法や助言をお願いします。
- 締切済み
- JavaScript
- 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については初心者なので、 基本的なところから間違っているのかもしれませんが、 ご回答よろしくお願いします。
- ベストアンサー
- JavaScript
- 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>
- ベストアンサー
- JavaScript
- 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; }
- ベストアンサー
- JavaScript
- 別ページのインラインフレームに表示させる方法
別ページのインラインフレームに表示させる方法 こんにちは。いつもお世話になっております。 数日前に自閉式ツリーについて質問させていただきました。 ありがとうございました。 http://okwave.jp/qa/q5526156.html --------------------------------------------------------------- <script type="text/javascript"> <!-- function tree2(menu_class,menu_id) { var div=document.getElementById(menu_id); if (div.style.display == "block") div.style.display="none"; else { var sib=div.parentNode.childNodes; for (var i=0; i < sib.length; i++) if (sib[i].className == menu_class) sib[i].style.display="none"; div.style.display="block"; } } // --></script> <style type="text/css"> <!-- .tree { display:none; } --></style> <p><a href="javascript:tree2('tree','menu1');" title="展開">展開</a></p> <div class="tree" id="menu1"> <ul> <li><a href="a.html" title="あ" target="frame">あ</a></li> <li><a href="aa.html" title="ああ" target="frame">ああ</a></li> </ul> </div> --------------------------------------------------------------- 【参考ページ】http://amenti.usamimi.info/treemenu2.html というふうに作っているのですが、たとえばAページの上記ツリーをクリックした際に内容がBﾍﾟｰｼﾞのインラインフレームframeに表示され、かつツリーが展開しているというような動作は可能でしょうか。 いろいろと高望みをしているとは思いますが、できればお力をお貸しください。 よろしくお願いします。
- ベストアンサー
- JavaScript
- 表示・非表示の度にURLにパラメーター表示
初心者なので間違っていることもあるかもしれませんが、よろしくお願いします。 サーバーサイドの言語ではないので無理だろうなとは思っていますが、念の為に詳しい方にお聞きしたいことがあります。 現在サイトを開設していてリンクをクリックしたらその下にサンプルテキストが表示・非表示で切り替わるようにしています。 1ページにこのような表示・非表示のリンクを多数設置しているのですが、クリックして表示させても当然URLはそのままです。 これをクリックした場合、例えば下記のようにすることはできるでしょうか？ http://○○.com/sample.html ↓ http://○○.com/sample.html?test このようにパラメーター？がついたURLにして表示させたりしたいのですが。そのURLにアクセスすれば、現在表示させているのがすぐ見れるように。 よくPHPやCGIでみられるやつです。 ソースは下記のようにしています。 □HTMLファイル <a href="#" class="player" onClick="showHide('TEST');return false;">テスト</a> <div id="TEST" style="display: none">サンプルテキスト</div> □外部JSファイル var objTextIDArray = new Array("TEST"); function showHide(targetID) { //functionの宣言。受けとったIDは変数targetIDに格納。 if( document.getElementById(targetID)) { //指定のIDのついたオブジェクトがあったら処理する //指定されたIDのstyle.displayがnoneなら if( document.getElementById(targetID).style.display == "none") { //blockに変更する for(var i = 0; i < objTextIDArray.length; i++) if(document.getElementById(objTextIDArray[i])) document.getElementById(objTextIDArray[i]).style.display = "none"; document.getElementById(targetID).style.display = ""; } else { //noneでなければ、つまりblockなら //noneにする document.getElementById(targetID).style.display = "none"; Javascriptに詳しい方に無理と言われれば諦めつくのですが。もしかしたら何か方法があるかもと思いました。 ご存知の方いらっしゃいましたら、ご教示ください。 よろしくお願いします。
- 締切済み
- JavaScript
- テキストやリンクの表示・非表示
Javascriptでテキストやリンクの表示や非表示をできるようにしたいです。 基本はテキストやリンクを非表示にして、”表示”リンクを表示させ、 ”表示”リンクをクリックすると、テキストと”非表示”リンクを表示させます。 しかし下のソースで実行をすると 最初、”表示”リンクのみ表示→”表示”リンクをクリック 次、テキストと”非表示”リンクを表示→”非表示”リンクをクリック 次、全て非表示 と、なってしまい、再度表示させることができなくなってしまいます。 よい解決方法があったら教えてください。 よろしくお願いします。 ========================================================== <html> <head> <title>表示・非表示テスト２</title> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <script language="javascript"> <!--// var typ; var typ2; function setDisplay(typ,typ2){ document.getElementById("myText").style.display = typ; document.getElementById("myText2").style.display = typ2; } //--> </script> </head> <body> <DIV ID="myText" style="display:none"> Display Sample<br> <a href="javascript:setDisplay('none','blcok');">非表示</a><br> </DIV> <br> <DIV ID="myText2"> <a href="javascript:setDisplay('block','none');">表示</a><br> </DIV> <br> </body> </html>
- ベストアンサー
- JavaScript
- 表示中のタブに色を付けたい
タブ1111～5555は青色表示されていますが 選択中には常に赤色表示させておきたいのですがどうすれば良いのでしょうか。 ご教授ください <html> <head> <script type="text/javascript"> function ChangeTab(tabname) { // 全部消す document.getElementById('tab1').style.display = 'none'; document.getElementById('tab2').style.display = 'none'; document.getElementById('tab3').style.display = 'none'; document.getElementById('tab4').style.display = 'none'; document.getElementById('tab5').style.display = 'none'; // 指定箇所のみ表示 document.getElementById(tabname).style.display = 'block'; } // --></script> </head> <body> <a href="#tab1" class="tab1" onclick="ChangeTab('tab1'); return false;">1111</a> <a href="#tab2" class="tab2" onclick="ChangeTab('tab2'); return false;">2222</a> <a href="#tab3" class="tab3" onclick="ChangeTab('tab3'); return false;">3333</a> <a href="#tab4" class="tab4" onclick="ChangeTab('tab4'); return false;">4444</a> <a href="#tab5" class="tab5" onclick="ChangeTab('tab5'); return false;">5555</a> <div id="tab1" class="tab"> <div class="information-newwarp">aaaa</div> </div> <div id="tab2" class="tab"> <div class="information-newwarp">bbbb</div> </div> <div id="tab3" class="tab"> <div class="information-newwarp">cccc</div> </div> <div id="tab4" class="tab"> <div class="information-newwarp">dddd</div> </div> <div id="tab5" class="tab"> <div class="information-newwarp">eeee</div> </div> <script type="text/javascript"><!-- // デフォルトのタブを選択 ChangeTab('tab1'); // --></script><!--■タブページデフォルト設定js--> </body> </html>
- ベストアンサー
- JavaScript
- クリックで特定のdiv要素が表示されるJavascriptに追加機能を
クリックで特定のdiv要素が表示されるJavascriptに追加機能を持たせたい よろしくお願い致します。 下記のようなコードで、HTML部分の「リンクテキスト」をクリックすると「クリックで開く内容」が表示され、かつ、リンクテキスト（id="link-1"）の文字色が変わるJavascriptを使用しています。 ■Javascript部分 function showHide(targetID) { if( document.getElementById(targetID)) { if( document.getElementById(targetID).style.display == "none") { document.getElementById(targetID).style.display = "block"; document.getElementById('link-1').style.color = "#cc0000"; } else { document.getElementById(targetID).style.display = "none"; document.getElementById('link-1').style.color = "#000000"; } } } ■HTML部分 <a href="#" id="link-1" onClick="showHide('hoge1');return false;">リンクテキスト</a> <div id="hoge1" style="display:none;">クリックで開く内容</div> リンクテキストの文字色が変わる部分は見よう見まねで追加したのですが、文字色が変わる部分を、link-2、link-3・・というように同ページに複数配置したい場合、どのようなコードに変更すればよいのでしょうか。 できればid="link-1"などという記述はせずに、showHide('hoge1');をshowHide('hoge2');に変えて、<div id="hoge1" style="display:none;">を<div id="hogge2" style="display:none;">に変えるだけで、文字色も変わるようにできれば一番良いのですが、そのような方法はあるのでしょうか？ 分かりにくい箇所は補足説明致しますので、どうぞご教授下さいますようお願い致します。
- ベストアンサー
- JavaScript
お礼
本当に簡易版ですが、思った通りの動きができていたので驚きました。素晴らしいです。ありがとうございました！