- ベストアンサー
B1～H1のボタンやリンクをクリックしたらiA1に表示する方法
- B1～H1の各ボタンやリンクをクリックしたら、iA1に表示する方法について教えてください。
- 参考サイトやスクリプトを教えていただけませんか？B1～H1のいずれかをクリックすると、id=A1に関連情報が表示されるようにしたいです。
- H1表示用のボタンやリンクを押すと、「テスト２です。」がid=A1に表示されるようにしたいです。どうすれば実現できますか？
- saya_batou
- お礼率61% (8/13)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんな感じでしょうか。 <script type="text/javascript"><!-- function viewA1(id){ document.getElementById("A1").innerHTML = document.getElementById(id).innerHTML; } //--> </script> <div id="A1"></div> <div id="B1" onclick=" viewA1(this.id) ">テスト1です</div> ... <div id="H1" onclick=" viewA1(this.id) ">テスト2です</div>
その他の回答 (1)
- leap_day
- ベストアンサー率60% (338/561)
こんにちは よく分かりませんが補足に書いてあるようなものでしたら style:displayをnone;←→block;で表示させればいいのでは？ <script type="text/javascript"> <!-- function viewA1(id){ for(i=0;i<4;i++) { document.getElementsByTagName("div")[i].style.display = "none"; } document.getElementById(""+id+"").style.display = "block"; } //--> </script> <title>test</title> </head> <body> <div id="A1"> </div> <div id="B1" style="display:none;">テスト1です</div> <div id="C1" style="display:none;">テスト2です</div> <div id="D1" style="display:none;">テスト3です</div><br> <br> <a onclick="viewA1('B1')">テスト1を表示します。</a><br> <a onclick="viewA1('C1')">テスト2を表示します。</a><br> <a onclick="viewA1('D1')">テスト3を表示します。</a><br> <a onclick="viewA1('A1')">Clear Text</a>
お礼
お陰様で解決致しました。 本当に有り難う御座いました。 viewA1('B1')などと指定すれば良かったんですね。 本当に有り難う御座いました。
補足
ご回答ありがとうございます。 説明の仕方が悪くて申し訳ございません。。 こんな感じでです。 ----------------------------------------------- <script type="text/javascript"> <!-- function viewA1(id){ document.getElementById("A1").innerHTML = document.getElementById(id).innerHTML; } //--> </script> <title>test</title> </head> <body> <div id="A1"></div> <div id="B1" style="display:none;">テスト1です</div> <div id="C1" style="display:none;">テスト2です</div> <div id="D1" style="display:none;">テスト3です</div><br> <br> <a href="#" onclick="viewA1(?)">テスト1を表示します。</a><br> <a href="#" onclick="viewA1(?)">テスト2を表示します。</a><br> <a href="#" onclick="viewA1(?)">テスト3を表示します。</a> </body> </html> --------------------------------------------------------- お忙しい中ありがとうございます。 よろしくお願いします。