アプリ版：「スタンプのみでお礼する」機能のリリースについて

クリックで表示/非表示の切り替え

解決済

  • 質問者：KEN1159
  • 質問日時：
  • 回答数：1件

私は今現在HPを作成しているのですが、その中の特定のページでテキストをクリックしたら表示/非表示の切り替えをしたいと考えてます。
表示/非表示自体は検索して出てきたオープンソースを拝借したら出来ました。
ソースは下記のように記述してます。
しかし、既存の状態だと『テキスト1』をクリックして表示させたらもう一度『テキスト1』をクリックしない限り非表示にはなりません。
『テキスト1』をクリックして表示している状態で『テキスト2』をクリックしたら自動的に『テキスト1』の表示されてる部分を非表示しにしたいのですが。

<head>
<SCRIPT type="text/JavaScript">
<!--
function showHide(targetID) { //functionの宣言。受けとったIDは変数targetIDに格納。
if( document.getElementById(targetID)) { //指定のIDのついたオブジェクトがあったら処理する
//指定されたIDのstyle.displayがnoneなら
if( document.getElementById(targetID).style.display == "none") {
//blockに変更する
document.getElementById(targetID).style.display = "block";
} 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>

Javascriptについてはまだ知識がなく解決方法が皆目見当もつきません。
ご存知の方いらっしゃいましたらご教示ください。
よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (1件)

No.1ベストアンサー

  • 回答者： nicorus
  • 回答日時：

こういうことでしょうか？



<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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

nicorusさん
ご回答ありがとうございました。
教えていただいたようにしたら無事できました。
助かりました。本当にありがとうございます。

通報する
お礼日時：2011/08/19 17:30

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報