- ベストアンサー
JavaScriptで見出しをクリックすると詳細内容が表示される方法
- JavaScriptを使って見出しをクリックすると、詳細内容が表示される方法を解説します。
- 今回は、左カラムにメニュー1からメニュー3までを表示する方法に焦点を当てます。
- JavaScriptの基礎が分からなくても、この記事を参考にすることで簡単に実装することができます。
- kitson00
- お礼率41% (33/80)
- ホームページ作成ソフト
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
アイコンの、入れ替わる元と後の画像がすべて共通なら、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title></title> <style type="text/css"> <!-- html,body,dl,dt,dd{ margin: 0px;padding: 0px; } --> </style> <script type="text/javascript"> function changeDisplay(elemID, iconID ){ var elem = document.getElementById(elemID); var icon = document.getElementById(iconID); if( elem.style.display=="none"){ elem.style.display="block"; icon.src = "img/common_img/icon_02.gif"; } else { elem.style.display="none"; icon.src = "img/common_img/icon_01.gif"; } } </script> </head> <body> <dl> <dt> <span onclick="changeDisplay('open01','icon01');"> <img id="icon01" src="img/common_img/icon_01.gif" alt="a" width="13" height="13" class="left_icon">menu1</span> </dt> <dd id="open01" style="display:none;"> <ul> <li><a href="">ボタン1</a></li> <li><a href="">ボタン2</a></li> </ul> </dd> <dt> <span onclick="changeDisplay('open02','icon02');"> <img id="icon02" src="img/common_img/icon_01.gif" alt="a" width="13" height="13" class="left_icon">menu2</span> </dt> <dd id="open02" style="display:none;"> <ul> <li><a href="">ボタン1</a></li> <li><a href="">ボタン2</a></li> </ul> </dd> </dl> </body> </html> 2個に増やしてみました。例えばですけど。 jsを外部ファイル化して動かなくなるのは、 ディレクトリの階層のところが間違っているのでは。
その他の回答 (2)
- zeff
- ベストアンサー率69% (137/198)
<html> <head> <title></title> <script type="text/javascript"> <!-- function changeDisplay(id){ var elem=document.getElementById(id); elem.style.display=elem.style.display=="none"?"block":"none"; } //--> </script> </head> <body> <span onclick="changeDisplay('open01');">menu1</span> <div id="open01" style="display:none;"> ボタン1 </div> </body> </html> こうやっても動かないなら原因は他にあるでしょう。
お礼
できました！ でも、jsファイルに function changeDisplay(id){ var elem=document.getElementById(id); elem.style.display=elem.style.display=="none"?"block":"none"; } を書いてjsファイルとして読み込むとできなくなるみたいです。 なんでですかね？
補足
度々すみません。 それと、menu1の前にアイコンをつけているのですが、以下のようになっています。 <img src="img/common_img/icon_01.gif" width="13" height="13" onClick="changeDisplay('open01');" class="left_icon"> <span onclick="changeDisplay('open01');">menu1</span> <div id="open01" style="display:none;"> <ul> <li><a href="">ボタン1</a></li> <li><a href="">ボタン2</a></li> </ul> </div> アイコン「→」もクリックするとボタン1、ボタン2が出るようにしていますが、ボタン1、ボタン2が出た時はアイコンも「↓」にしたいのですが、無理なのでしょうか？
- zeff
- ベストアンサー率69% (137/198)
単なるスペリングミスですね。 getElementByld ではなく getElementById です。 idの「i」が大文字になっているので「I」。
補足
.getElementById(id); に変更しても何もかわりません。 他に原因があるのでしょうか？
お礼
ありがとうございました。 無事アイコンもかえることができました。 Javascriptが何も分からないですが、今後勉強しようと思います。