- ベストアンサー
他のページからリンクしてきた場合に表示されるレイヤーを切り替える方法について
- 一つのページに重なり合う3つのレイヤーがあり、それぞれのレイヤーを表示するためのボタンがあります。
- 現在の状態では、他のページからリンクしてきた場合には最初にレイヤー1が表示されます。
- 他のページからリンクしてきた場合に、リンク元のページによって最初に表示されるレイヤーを切り替えたいです。
- yob_b_repu
- お礼率16% (1/6)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
ありゃ・・・なんかまずったかなぁ・・・ ほかのライブラリ読んでたりしますか？window.onloadが競合しているのかも。 とりあえず、1ページ内にまとめたバージョンです以下で再度確認してみてください。 //fuga.htm <a href="hoge.htm">to1</a> <a href="hoge.htm?l=2">to2</a> <a href="hoge.htm?l=3">to3</a> //hoge.htm <html> <head> <style type="text/css"> .hide{ display:none; } </style> <script type="text/javascript"> function getSearch(key){ var s0=location.search.substring(1); var s1=s0.split("&"); var v=false; for(var i in s1){ var s2=s1[i].split("="); if(s2[0]=="l"){v=parseFloat(s2[1]);break;} } return v; } function disp(num){ var obj=document.getElementById("l"+num.toString())?document.getElementById("l"+num.toString()):false; if(!obj) return false; var n=obj.parentNode.firstChild; while(n){ if(n.nodeName=="DIV") n.className="hide"; n=n.nextSibling; } obj.className=""; } </script> </head> <body> <div id="l0"> <div id="l1">レイヤー１</div> <div id="l2" class="hide">レイヤー２</div> <div id="l3" class="hide">レイヤー３</div> <input type="button" value="レイヤー１" onclick="disp(1)"> <input type="button" value="レイヤー２" onclick="disp(2)"> <input type="button" value="レイヤー３" onclick="disp(3)"> </div> <script type="text/javascript"> var l=getSearch("l"); if(l){ disp(l)}; </script> </body> </html>
その他の回答 (1)
- yambejp
- ベストアンサー率51% (3827/7415)
こんな感じでいかが？ hoge.htm?l=2 というようなパラメータをつけるとそのidのレイヤーが表示されます。 なければ1が表示されます。 //hoge.htm <link rel="stylesheet" type="text/css" href="hoge.css" /> <script type="text/javascript" src="hoge.js"></script> <div id="l0"> <div id="l1">レイヤー１</div> <div id="l2" class="hide">レイヤー２</div> <div id="l3" class="hide">レイヤー３</div> <input type="button" value="レイヤー１" onclick="disp(1)"> <input type="button" value="レイヤー２" onclick="disp(2)"> <input type="button" value="レイヤー３" onclick="disp(3)"> </div> //hoge.js window.onload=function(){ var l=getSearch("l"); if(l){ disp(l)}; } function getSearch(key){ var s0=location.search.substring(1); var s1=s0.split("&"); var v=false; for(var i in s1){ var s2=s1[i].split("="); if(s2[0]=="l"){v=parseFloat(s2[1]);break;} } return v; } function disp(num){ var obj=document.getElementById("l"+num.toString())?document.getElementById("l"+num.toString()):false; if(!obj) return false; var n=obj.parentNode.firstChild; while(n){ if(n.nodeName=="DIV") n.className="hide"; n=n.nextSibling; } obj.className=""; } //hoge.css .hide{ display:none; }
お礼
やってみましたが出来ませんでした。 ・ジャバスクリプトの部分をそのままコピーしてページにペースト。 （外部ファイルではなくそのままページに） ・スタイルシートの部分をそのままコピーしてページにペースト。 （cssは外部ファイルに記入） ・idを上記のように変更。 ・ほかのページからのリンクのパスの最後に（?l=2）を記入。 本当に申し訳ないのですが、もし良ければ、何を間違えているのか教えていただけないでしょうか？ よろしくおねがいします。
補足
ありがとうございますっ！！ 正直なところ、私ジャバスクリプトが良く分からないのですが、そのまま入れてみて試してみます！