複数のコンテンツをボタンクリックにて表示・非表示にしたいのですが、うまくいきません。
なんとか、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ベストアンサー
- 回答日時:
きれいに消しこみができていませんね。
こういうのはグルーピングした方がすっきりします。
こんな感じでどうでしょ?
<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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript htmlとcssで分数を表示後、分数の右側に文書を書きたい 1 2022/04/28 10:09
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- HTML・CSS 分数が正常に表示されない。 6 2022/05/09 18:53
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
読み込んだQRコードをフォーム...
-
マウスを乗せるとメニュー表示
-
[急ぎ] videoタグで埋め込んだm...
-
タブで開いてさらにタブ内をア...
-
背景色を一定時間ごとにランダ...
-
console.log結果をhtmlで表示し...
-
removeAttribute()メソッドで削...
-
removeEventListenerについて
-
javascriptでpostした値が取得...
-
折りたたみ部分にアンカーでリ...
-
多次元配列を連想配列へ変換したい
-
jQueryでシンプルドラッグドロ...
-
jQueryで同じid属性が複数あっ...
-
ダブルクォーテーションが消え...
-
javascriptでオブジェクトの重...
-
displayの状態を取得したい
-
クリックで色変更後に既に変更...
-
<前 次> のようなリンクを見...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
読み込んだQRコードをフォーム...
-
createElementで作成した要素を...
-
removeEventListenerについて
-
IFRAMEの表示/非表示を切り替え...
-
タブで開いてさらにタブ内をア...
-
変数名をどのようにつけるのが...
-
クリックで色変更後に既に変更...
-
表示・非表示のスクリプトで、...
-
HTMLとJavaScriptで作ったタイ...
-
console.log結果をhtmlで表示し...
-
jQueryでクリックされた要素のi...
-
HTMLタグに複数のクラスを設定...
-
指定したパスが現URLに含まれて...
-
iframe内のリンクが飛ばないの...
-
背景色を透明化
-
テキストエリア内の一部の文字...
-
変数内容をHTML内で表示する方法
-
classの中の<a>タグにidを追加
おすすめ情報