表示・非表示のスクリプトで、複数指定する場合はどうしたらいいですか？

質問

複数のコンテンツをボタンクリックにて表示・非表示にしたいのですが、うまくいきません。
なんとか、2つまではわかったのですが、3つまで表示すると3つ目が非表示になってくれません。
最終的には5つくらいを下記のスクリプトで行いたいのですが、どうすれば、複数のIDを対応させることができますか？

●例えば、test1を押した際、test2と3は非表示としたいです。

<script language="JavaScript" type="text/JavaScript">
<!--
function ChDsp2(strShow,strHidden){
var obj='';
obj=document.all && document.all(strShow) || document.getElementById && document.getElementById(strShow);
obj.style.display = "block";
obj=document.all && document.all(strHidden) || document.getElementById && document.getElementById(strHidden);
obj.style.display = "none";
}
//-->
</script>

<a href="javascript:ChDsp2('text1','text2');">1を表示</a>
<a href="javascript:ChDsp2('text2','text1');">2を表示</a>
<a href="javascript:ChDsp2('text3','text1');">3を表示</a>

<span id="text1" style="display:block;">111111</span>
<span id="text2" style="display:none;">222222</span>
<span id="text3" style="display:none;">333333</span>

どなたか教えてください。お願いします。

回答No.1

yambejp · ベストアンサー

きれいに消しこみができていませんね。
こういうのはグルーピングした方がすっきりします。
こんな感じでどうでしょ？

<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>

お礼

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