• ベストアンサー

複数項目の表示切替え

JavaScriptを使用し、特定の文字や文の表示・非表示を切り替えられるページを作ろうとしています。 検索サイトを使って探してみましたが、リンクやボタンを切り替える部分が一対一対応のものしか見つけられませんでした。 一箇所のクリックで複数の項目を切り替えられるスクリプトをご存知の方、答えの一部かヒントをいただけないでしょうか。 ちなみに全くの素人ではなく初心者のレベルです。getElementByIdで一対一対応のやり方は理解できてきたところです。 なお、同時に切り替える部分が最低でも10以上ですので、一対一対応のものを並べる形は避けたいと思っています。

noname#49614
noname#49614

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

  • ベストアンサー
  • leap_day
  • ベストアンサー率60% (338/561)
回答No.2

こんにちは 一例として・・・ getElementById("")ではなくgetElementsByTagName("")やgetElementsByClassName("")を使用すればできます 上の<script>～</script>がgetElementsByTagName用、 下の<script>～</script>がgetElementsByClassName用 <script type="text/javascript"><!-- function tagopen() { tags = document.getElementsByTagName("div"); for(i=0;i<tags.length;i++) { tags[i].style.display = "block"; } } function tagclose() { tags = document.getElementsByTagName("div"); for(i=0;i<tags.length;i++) { tags[i].style.display = "none"; } } //--></script> <script type="text/javascript"> <!-- document.getElementsByClassName = function (className) { var i, j, eltClass; var objAll = document.getElementsByTagName ? document.getElementsByTagName("*") : document.all; var objCN = new Array(); for (i = 0; i < objAll.length; i++) { eltClass = objAll[i].className.split(/\s+/); for (j = 0; j < eltClass.length; j++) { if (eltClass[j] == className) { objCN.push(objAll[i]); break; } } } return objCN; } function classopen() { CLASS = document.getElementsByClassName("test"); for(i=0;i<CLASS.length;i++) { CLASS[i].style.display = "block"; } } function classclose() { CLASS = document.getElementsByClassName("test"); for(i=0;i<CLASS.length;i++) { CLASS[i].style.display = "none"; } } //--> </script> <style type="text/css"> .test { display:none; } </style> </head><body> <input type="button" value="tag open" onclick="tagopen()"> <input type="button" value="tag close" onclick="tagclose()"> <input type="button" value="class open" onclick="classopen()"> <input type="button" value="class close" onclick="classclose()"> <div class="test">0</div> <div class="test">1</div> <div class="test">2</div> <p class="test">3</p> <p class="test">4</p> <p class="test">5</p>

noname#49614
質問者

お礼

ありがとうございます。 そんなメソッドがあったんですね。 再質問の形になって申し訳ないのですが、上のスクリプトでは<div>タグの項目すべて、下のスクリプトは「class="test"」の項目すべてがまとめて切り替えられるということですよね？ 早速試させていただきます。

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (1)

  • arexis
  • ベストアンサー率66% (66/99)
回答No.1

その『複数の場所』がひとつの連続してる集団であれば そこをDIVタグで囲んで、そのDIVを 表示・非表示にすれば一括です。 複数の場所が、点在してる場合で、記述で並べるのが嫌 と言う事なら ID名をあらかじめグループ化するか配列に入れて置いてfor文で回すのがわかりやすいかも？ と思います。 クリックなどの起動動作 onclick = "関数('block')" //引数は styleの値 ↓ GroupA+数字というIDをつけてある場合 関数(arg){ for(var i=0; i<20; i++){ document.getElementById('GroupA' + i).style.display = arg; } } 配列にしておく場合(IDのグループわけが無理な場合) スクリプト冒頭に var GroupA = ['aaa','cccc','eeee','gggg']; の様に一括で動かすグループを作っておく 関数(arg){ for(var i=0; i<GroupA.length; i++){ document.getElementById(GroupA[i]).style.display = arg; } }

noname#49614
質問者

お礼

ありがとうございます。 for文というのは気づきませんでした。試させていただきます。

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

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

    複数のコンテンツをボタンクリックにて表示・非表示にしたいのですが、うまくいきません。 なんとか、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> どなたか教えてください。お願いします。

  • 表示/非表示の切り替え

    AAA、BBB、CCCの３つが縦に並んでいるとします。 ここで、あるボタンをクリックすると、BBBが消えるようにしたいです。 JavaScriptを使用して、以下のようなものを作ってみましたが、これだと、BBBが消えたスペースが空白として残ってしまいます。 スペースを残さずに、AAAとCCCを詰めて表示させたいのですが、何か方法はありますでしょうか？ ====================================================================== <html> <body> <SCRIPT LANGUAGE='JavaScript'> <!-- function showLAYER(idName){ document.getElementById(idName).style.visibility = 'visible' } function hiddenLAYER(idName){ document.getElementById(idName).style.visibility = 'hidden' } //--> </SCRIPT> <A HREF="javascript:showLAYER('layer1')">[表示]</A> <A HREF="javascript:hiddenLAYER('layer1')">[非表示]</A> <br><br> AAA<br> <DIV ID = "layer1" > BBB </DIV> CCC<br> </body> </html> ======================================================================

  • どのリンクが表示されているかのスクリプトを作るには？

    こんばんわ。 http://www.umechando.com/javascript/index.html様の左側にあるメニュー部分なんですが、リンクをクリックするとそのリンク部分の左側に、赤い矢印の画像が表示されます。 これは、スクリプトで処理されているようなんですが、どのような構造になっているのでしょうか？ ヒントでもサンプルでもいいので、よろしくお願いします。

  • 複数の外部jsをランダム表示させたい

    １つのhtmlの中で <script type="text/javascript" src="001.js"></script> <script type="text/javascript" src="002.js"></script> <script type="text/javascript" src="003.js"></script> といった複数のjsをランダムで表示させるコードや、サンプル掲載サイトを教えていただけませんか？ 各jsの中身はテキストや画像などHTMLに表示されるものになっています。 よくあるランダムバナーやランダムリンクのjs版という感じです。 画像やテキストのランダムスクリプトを使って、呼び出される部分に当たるところを上記のようなjsに変えてみたりもしたのですが、IEやOperaではOKでしたがFirefoxではエラーになってしまったり、表示されなくなったりして上手くいきませんでした…；； よろしくお願いいたします。

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

    私は今現在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についてはまだ知識がなく解決方法が皆目見当もつきません。 ご存知の方いらっしゃいましたらご教示ください。 よろしくお願いします。

  • プルダウンの切り替えについて

    ページのある部分のみjavascriptで別ファイルを読み込ませ（includeのような形）、 プルダウンでその部分が切り替わるように設定したいと考えております。 プルダウンをリンクとして使用したり、画像の切り替えなどは検索で探すとよく見掛けるのですが、 上記のような形は検索で探しても見つからず、困っております。 下記のURLは画像の切り替えですが、この画像の切り替え部分をそのままHTMLファイルを読み込ませて表示させるようになれば、と思っております。 http://www.geocities.co.jp/HeartLand-Kaede/3853/jyouhoufile/im6.html やりたい事 ・プルダウンの切り替えでページの一部分に別ファイルを読み込ませ表示させる ・プルダウンの項目を変えると同時に表示も変わる ・プルダウンの項目はそのまま差し替わった時の項目を指している javascript初心者の為、自分で組もうにも全くと言っていいほど分からなかったので、こちらで質問させて頂きました。 分かりにくい文章で申し訳ありませんが、どうぞお力をお貸しくださいますようお願い致します。

  • hiddenを使って項目の表示、非表示を切り替えたいのですが

    素人ですので、質問がクリアでないかもしれませんが宜しく御願い致します。 <---A---><--B--><-C-><--D-->といった形で表示されているものを、例えばBとCを非表示にして <---A---><--D-->のように表示する又はAとCを非表示にして <--B--><--D-->といった形で表示出来ないでしょうか <div class="A">A <div class="B">B <div class="c">C <div class="d">D 以下やってみたのですが <script type="text/javascript"> function hidden_Disp() { document.getElementById("B").style.visibility = "hidden"; document.getElementById("C").style.visibility = "hidden"; } </script> でやってみましたが駄目です。 何卒宜しく御願い致します。

  • ある項目をクリックして複数リンクの表示方法？

    ビルダー１２でホームページを製作しています、ある項目にマウスをオバーさせたら、複数のリンク先を表示させたいのですが、どうしたら良いでしょうか、教えてください。

  • javascriptで編集可能不可能の切り替え

    いつもお世話になっております。 javascriptを用いて、テキストボックスを状況によって編集可能、不可能を 変更するものを作っております。 現在、テキストボックス単品ではその動作が可能となっていますが、 複数のものに対してその動作を行うには、どうすればよいかわからず困っています。 現在のソースは以下のようになっています。必要な部分だけ抜き出しています。 <script type="text/javascript"> function display() { var tmp = prompt("password?",""); //表示させるかどうか判別する if (tmp == 1) { document.getElementById("textboxのID").readOnly = false; } else if (tmp == 2) { document.getElementById("textboxのID").readOnly = true; } } </script> <body onload="display();"> ・・・・ </body> テキストが一つや二つ程度ならこれでも十分ですが、今回は テキストボックスが多数(100程度)あるので、このまま地道にやるのはどうかと思いました。 IDを数字にして、 for (var i = 0; i < 100; i++) { document.getElementById(i).readOnly = true; } とやってみましたが、これもdocument.getElementById("0") = true;単品では 成功しましたが、iが定義されていないというようなエラーメッセージが表示されて、 うまくいきませんでした。 以上の件を、ご教授お願いします。

  • onmouseoverの表示切り替えが上手くいかない

    onmouseoverを使って、隠していた＜DIV＞を表示させたいと思っています。 ＜li＞にマウスが重なったら、その直前に表示させていた＜DIV＞を隠した上で、idに対応する＜DIV＞を表示させ、さらに＜H2＞に重なった場合にも隠す、という流れの処理を考えています。 firefoxのエラーコンソールでは「descriptionw0 is not defined」となって、動作しません。IEでもエラーになります。 どこかでミスをしてはずなのですが、どうやっても上手くできないので、知恵を貸していただけないでしょうか。よろしくお願いします。 -------------------------- javascript --------------------------- <script language="javascript"> <!-- var target = null; function mOver(t){ if(target!=null){ document.getElementByID(target).style.display = 'none'; } document.getElementByID(t).style.display = 'block'; target = t; } function mOut(){ if(target!=null){ document.getElementByID(target).style.display = 'none'; } target=null; } //--> </script> ---------------------------- HTML部分 ---------------------------- <div class="part"> <h2 class="title" onMouseover="mOut()">＊＊＊</h2> <ul class="article"> <li onMouseover="mOver(descriptionw0)"><a href="#">ＡＡＡ</a></li> <li onMouseover="mOver(descriptionw1)"><a href="#">ＢＢＢ</a></li> </ul> <div class="description" id="descriptionw0" style="display:none;">ａａａ</div> <div class="description" id="descriptionw1" style="display:none;">ｂｂｂ</div> </div>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する