• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:表示・非表示のスクリプトで、複数指定する場合はどうしたらいいですか?)

複数のコンテンツをボタンクリックで表示・非表示する方法

このQ&Aのポイント
  • 複数のコンテンツをボタンクリックにて表示・非表示するためのスクリプトを作成する方法について教えてください。
  • 現在、2つまでは表示・非表示することができるが、3つ以上を対応させる方法がわかりません。
  • 最終的には5つくらいを表示・非表示できるようにしたいのですが、どうすれば良いでしょうか?

質問者が選んだベストアンサー

  • ベストアンサー
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

きれいに消しこみができていませんね。 こういうのはグルーピングした方がすっきりします。 こんな感じでどうでしょ? <style> .hide{display:none;} .r{ background-Color:red;} .g{ background-Color:green;} .b{ background-Color:blue;} </style> <script> function ChDsp2(strShow,classHidden){ var tags=document.getElementsByTagName("div"); for(var i=0;i<tags.length;i++){ if(tags[i].className.match('textALL')){ tags[i].className=tags[i].className.replace(/hide/,"").replace(/^\s+|\s+$/,""); if(tags[i]!=document.getElementById(strShow)) tags[i].className+=' hide'; } } return false; } </script> <a href="#" onclick="return ChDsp2('text1','textALL');">1を表示</a> <a href="#" onclick="return ChDsp2('text2','textALL');">2を表示</a> <a href="#" onclick="return ChDsp2('text3','textALL');">3を表示</a> <div id="text1" class="textALL r">111111</div> <div id="text2" class="textALL g hide">222222</div> <div id="text3" class="textALL b hide">333333</div>

egtomo
質問者

お礼

凄いです。解決しました。 こんな一瞬で出来るものなんですね・・・ 本当にありがとうございます。

関連するQ&A

専門家に質問してみよう