- 締切済み
URL末尾に特定の文字を含む場合に非表示だったdivを表示に切り換えたいのですが。。
URL末尾に特定の文字を含む場合にcssで非表示だったdivを表示に切り換えるということをやりたいのですが。。 以下のようなソースになります。 このindex.htmlの末尾に?num2などを追加した場合に、 window.location.searchでURLの?以下を取得して 取得した値と一致したidを持つdivはdisplay:block;を上書きして表示するということをやりたいです。 なんとなくできそうな気がするのですが、実際にどのように記述すれば良いのかわかりません。。 また同様の方法で複数のdivを表示したい場合はどのようにすれば良いでしょうか？ 例えばnum1とnum4とnum5のdivを表示するなどです。 Javascriptにお詳しい方教えていただけますでしょうか？ 不躾な質問ですが、よろしくお願いします。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>test</title> <style type="text/css"> <!-- div#num0,div#num1,div#num2,div#num3,div#num4,div#num5 { width:100px; background-color:#ccc; margin:10px; display:none; } --> </style> </head> <body> <div id="num0">１番目</div> <div id="num1">２番目</div> <div id="num2">３番目</div> <div id="num3">４番目</div> <div id="num4">５番目</div> <div id="num5">６番目</div> </body> </html>
- nwnwnw
- お礼率14% (1/7)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- Hardking
- ベストアンサー率45% (73/160)
URLの書式を下記のように修正して、再試行してください。 http://www.test.com/index.html?num1=1&num3=1
- Hardking
- ベストアンサー率45% (73/160)
onLoad時に、該当項目のスタイル変更を行うファンクションを呼ぶ一例です。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>test</title> <style type="text/css"> <!-- div#num0,div#num1,div#num2,div#num3,div#num4,div#num5 { width:100px; background-color:#ccc; margin:10px; display:none; } --> </style> <script type="text/javascript"> <!-- // ?以降のURL情報を格納退避する。 var query = window.location.search.substring(1); function changeStyle() { var parms = query.split('&'); for (var i=0; i<parms.length; i++) { var pos = parms[i].indexOf('='); if (pos > 0) { var key = parms[i].substring(0,pos); var val = parms[i].substring(pos+1); document.getElementById(key).style.display = "block"; } } } // --> </script> </head> <body onLoad="changeStyle()"> <div id="num0">１番目</div> <div id="num1">２番目</div> <div id="num2">３番目</div> <div id="num3">４番目</div> <div id="num4">５番目</div> <div id="num5">６番目</div> </body> </html>
補足
ご回答ありがとうございます。 早速、http://www.test.com/index.html?num1&num3 などと記述して試しているのですが、私の環境（mac OSX safari3.2.1）では動作しませんでした。 動作する環境が限られているのでしょうか？ もしくは私のURLの記述方法が間違っていますか？
お礼
解決しました！ありがとうございました！