- ベストアンサー
テキストをクリックしたら表示/非表示の切り替えをしたい
- 現在、HP作成中の特定のページでテキストをクリックしたら表示/非表示の切り替えをしたいです。
- 表示/非表示自体はオープンソースを使用して実装できましたが、複数のテキストを切り替える方法が分かりません。
- Javascriptの知識がなく解決策が見つからないので、助けを求めています。
- KEN1159
- お礼率88% (45/51)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
こういうことでしょうか？ <head> <SCRIPT type="text/JavaScript"> <!-- var objTextIDArray = new Array("SH-001","SH-002"); function showHide(targetID) { //functionの宣言。受けとったIDは変数targetIDに格納。 if( document.getElementById(targetID)) { //指定のIDのついたオブジェクトがあったら処理する //指定されたIDのstyle.displayがnoneなら if( document.getElementById(targetID).style.display == "none") { //blockに変更する for(var i = 0; i < objTextIDArray.length; i++) if(document.getElementById(objTextIDArray[i])) document.getElementById(objTextIDArray[i]).style.display = "none"; document.getElementById(targetID).style.display = ""; } else { //noneでなければ、つまりblockなら //noneにする document.getElementById(targetID).style.display = "none"; } } } //--> </SCRIPT> </head> <body> <a href="#" onClick="showHide('SH-001');return false;">テキスト1</a> <a href="#" onClick="showHide('SH-002');return false;">テキスト2</a> <div id="SH-001" style="display: none">テキスト1をクリックしたら表示される部分</div> <div id="SH-002" style="display: none">テキスト2をクリックしたら表示される部分</div> </body>
お礼
nicorusさん ご回答ありがとうございました。 教えていただいたようにしたら無事できました。 助かりました。本当にありがとうございます。