- ベストアンサー
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側にあらかじめ設定がひつよう
お礼
早々に回答頂きありがとうございました。できないわけはなさそうなのですね。
お礼
本当に簡易版ですが、思った通りの動きができていたので驚きました。素晴らしいです。ありがとうございました！