- ベストアンサー
表示レイヤーの切り替え
- クリックで表示レイヤーの切り替えをしたいと考えています。イメージとしては下記のサイトに近いのですが、1つのレイヤーにしか対応していないので複数のレイヤーに対して行いたいです。
- 例えばid test01～test10 までの10個のレイヤーがあるとして、メニュー1をクリックすると、test1とtest2を表示させ他は非表示、メニュー2をクリックすると、test3とtest5とtest10を表示など汎用性を持たせたいです。
- 上記サイトのスクリプトを改造する等で実現できますでしょうか？ご教授お願いします。
- ebifly
- お礼率75% (15/20)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
たとえばこんな感じ <html> <head> <script language="javascript"> function view(array){ for(var i=1;i<=10;i++){ document.getElementById("test"+i).style.display="none"; } for(i in array){ document.getElementById("test"+array[i]).style.display="block"; } } </script> <style type="text/css"> div.defaultdev{ display:none; } </style> </head> <body> <form> <input type="radio" name="test" onClick="view(Array(1,2))">1,2を表示 <input type="radio" name="test" onClick="view(Array(3,5,10))">3,5,10を表示 <input type="radio" name="test" onClick="view(Array(4,7,8))">4,7,8を表示 </form> <div id="test1" class="defaultdev">test01</div> <div id="test2" class="defaultdev">test02</div> <div id="test3" class="defaultdev">test03</div> <div id="test4" class="defaultdev">test04</div> <div id="test5" class="defaultdev">test05</div> <div id="test6" class="defaultdev">test06</div> <div id="test7" class="defaultdev">test07</div> <div id="test8" class="defaultdev">test08</div> <div id="test9" class="defaultdev">test09</div> <div id="test10" class="defaultdev">test10</div> </body> </html>
お礼
yambejp様 ありがとうございます。 まさに私が求めていたスクリプトそのものです。 さっそく使わせていただきます。 ありがとうございました。