クリックで特定のdiv要素が表示されるJavascriptに追加機能を持たせたい

前へ 次へ
このQ&Aのポイント
  • クリックで特定のdiv要素が表示されるJavascriptに追加機能を持たせたい場合、idを指定せずに複数のdiv要素を対象にする方法があります。
  • 具体的には、showHide関数の引数を変えることで、異なるdiv要素を操作できます。
  • また、それに応じてリンク要素のidやdiv要素のidも変更する必要があります。
回答を見る
  • ベストアンサー

クリックで特定のdiv要素が表示されるJavascriptに追加機能を

クリックで特定のdiv要素が表示されるJavascriptに追加機能を持たせたい よろしくお願い致します。 下記のようなコードで、HTML部分の「リンクテキスト」をクリックすると「クリックで開く内容」が表示され、かつ、リンクテキスト（id="link-1"）の文字色が変わるJavascriptを使用しています。 ■Javascript部分 function showHide(targetID) { if( document.getElementById(targetID)) { if( document.getElementById(targetID).style.display == "none") { document.getElementById(targetID).style.display = "block"; document.getElementById('link-1').style.color = "#cc0000"; } else { document.getElementById(targetID).style.display = "none"; document.getElementById('link-1').style.color = "#000000"; } } } ■HTML部分 <a href="#" id="link-1" onClick="showHide('hoge1');return false;">リンクテキスト</a> <div id="hoge1" style="display:none;">クリックで開く内容</div> リンクテキストの文字色が変わる部分は見よう見まねで追加したのですが、文字色が変わる部分を、link-2、link-3・・というように同ページに複数配置したい場合、どのようなコードに変更すればよいのでしょうか。 できればid="link-1"などという記述はせずに、showHide('hoge1');をshowHide('hoge2');に変えて、<div id="hoge1" style="display:none;">を<div id="hogge2" style="display:none;">に変えるだけで、文字色も変わるようにできれば一番良いのですが、そのような方法はあるのでしょうか？ 分かりにくい箇所は補足説明致しますので、どうぞご教授下さいますようお願い致します。

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

  • ベストアンサー
  • Chaire
  • ベストアンサー率60% (79/130)
回答No.3

ハイパーリンクを使うなら、きちんとリンクをつなげて下さい。今どきのブラウザなら、下記だけで表示・非表示の切り替えが可能です。 ※今どきでなくとも、スクリプトありきの HTML や CSS の書き方は止めましょう。style="display: none" だの href="#" だの、ロクなことになりません。 <style type="text/css"> div[id^="section"]:not(:target) { display: none; } </style> <ul> 　<li><a href="#section-1">ラベル 1</a></li> 　<li><a href="#section-2">ラベル 2</a></li> </ul> <div id="section-1"><p>内容 1</p></div> <div id="section-2"><p>内容 2</p></div> --- 次に上記の HTML をベースにして、今どきでないブラウザを対象にしつつ、ラベル色の切り替えも組み込みます。 <script type="text/javascript"> document.write('<style type="text/css">div#section-1, div#section-2 { display: none }<\/style>'); function OK_toggle(a) { 　var id = a.hash.slice(1); 　var div; 　if ((div = a.ownerDocument.getElementById(id))) { 　　if (div.style.display === 'block') { 　　　// calls removeProperty() in CSSOM 　　　div.style.display = ''; 　　　a.style.color = ''; 　　} else { 　　　div.style.display = 'block'; 　　　a.style.color = '#c00'; 　　} 　} 　return false; } </script> <ul> 　<li><a href="#section-1" onclick="OK_toggle(this); return false;" onkeydown="this.onclick(event); return true;">ラベル 1</a></li> 　<li><a href="#section-2" onclick="OK_toggle(this); return false;" onkeydown="this.onclick(event); return true;">ラベル 2</a></li> </ul> <div id="section-1"><p>内容 1</p></div> <div id="section-2"><p>内容 2</p></div> style 要素を document.write() しているので、この script 要素は head 要素内にしか置けないことに注意して下さい。 --- 補足。ここで、a 要素に全く同じ onclick、onkeydown 属性を書いていることに気付くでしょう。実はこれを、 <ul onclick="OK_toggle(event); return false;" onkeydown="this.onclick(event); return true;"> と親である ul 要素（あるいは、もっと祖先）に一括して書いてしまう方法があるのですが、それはおいおい調べて下さい。 ※さらに言うと、a の id="link-1" があると @aria-labelledby から参照できるのでアクセシビリティ的にやや有利なのですが（しかも、スクリプト未経験者にも扱いやすくはなる）、それはご希望でないとのことで省きます。

patsaysnow
質問者

お礼

丁寧にお教え頂きありがとうございました。 div[id^="section"]:not(:target) { display: none; } で表示・非表示を実現できるというのには驚きました。<a href="#">が好ましくないというのも大変勉強になりました。 お教え頂いたコードも参考にさせて頂きます。 本当にありがとうございました。

その他の回答 (2)

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.2

こおすればどうでしょう（全角空白は半角空白にかえてね） function showHide(event,targetID) { 　var target = event.target || event.srcElement; 　if( document.getElementById(targetID)) { 　 if( document.getElementById(targetID).style.display == "none") { 　　 document.getElementById(targetID).style.display = "block"; 　　 target.style.color = "#cc0000"; 　 } 　 else { 　　 document.getElementById(targetID).style.display = "none"; 　　 target.style.color = "#000000"; 　 } 　} } 呼び出すときは <body> <div> <a href="#" onClick="showHide(event,'hoge1');return false;">リンクテキスト</a> </div> <div> <a href="#" onClick="showHide(event,'hoge2');return false;">リンクテキスト</a> </div> <div id="hoge1" style="display:none;">クリック1で開く内容</div> <div id="hoge2" style="display:none;">クリック2で開く内容</div> </body> のようにして、id="link-1"などという記述はしません

patsaysnow
質問者

お礼

丁寧にお教え頂きありがとうございました。 元のコードに近い内容で、非常に分かりやすく助かりました。 ほかの方からお教え頂いたコードとともに参考にさせて頂きます。 本当にありがとうございました。

  • yamada_g
  • ベストアンサー率68% (258/374)
回答No.1

簡易的なものですが、こんなのではどうですか？ //処理設定要素のプレフィックス var LINK_PREFIX = 'link-'; //内容表示要素のプレフィックス var CONTENT_PREFIX = 'hoge'; function showHide(targetID) { if( document.getElementById(CONTENT_PREFIX + targetID)) { if( document.getElementById(CONTENT_PREFIX + targetID).style.display == "none") { document.getElementById(CONTENT_PREFIX + targetID).style.display = "block"; document.getElementById(LINK_PREFIX + targetID).style.color = "#cc0000"; } else { document.getElementById(CONTENT_PREFIX + targetID).style.display = "none"; document.getElementById(LINK_PREFIX + targetID).style.color = "#000000"; } } } //要素に処理を設定する関数 function setFunc(obj) { var targetId = obj.id.replace(LINK_PREFIX,''); obj.onclick = function() { showHide(targetId); return false; }; } //画面読み込み完了時に実行 window.onload = function() { //aタグを取得します var links = document.getElementsByTagName('a'); //取得した要素のループ for (var i = 0; i < links.length; i++) { //要素を取得 var a = links.item(i); //処理設定対象の場合 if (a.id.indexOf(LINK_PREFIX) === 0) { setFunc(a); } } }; aタグのidを'link-連番'、divタグのidを'hoge連番'と配置しておけば希望の動きになると思います。 質問の意図が違ってたらすみません。

patsaysnow
質問者

お礼

丁寧にお教え頂きありがとうございました。 色々な実現方法をお教え頂いたので、それぞれどのような違いがあるのか まだよく分かっていないのですが、こちらの方法も参考にさせて頂きます。 本当にありがとうございました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

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

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

  • div要素をランダムに表示させたい

    お世話になります。Javascriptについて質問させていただきます。 拙い説明で分かりにくいかと思いますが、ご教授いただけたらと思います。 javascriptとcssを使用して、ページをリロードする度に、divの要素をランダムに表示させるようにしたいと考えています。 ランダムで表示させるにはfunction test(no)関数のどこかにランダムで値を取得できるようにする必要があると思っているのですが、上手く設定ができずに悩んでいます。 ご回答頂けたら幸いです。 ■ html <body onLoad="test(no)"> <div id="link"> <div class="link01"> <p>文章1</p> </div> <div class="link02"> <p>文章2</p> </div> <div class="link03"> <p>文章3</p> </div> </div> <ul> <li><a href="#" onclick="showChanger(1);">リンク1</a></li> <li><a href="#" onclick="showChanger(2);">リンク2</a></li> <li><a href="#" onclick="showChanger(3);">リンク3</a></li> </ul> ■javascript function test(no){ var parenObj=document.getElementById("link"); for(var i in parenObj.childNodes){ var childObj=parenObj.childNodes[i]; if(childObj.tagName=="DIV"){ if(no == 1){ if(childObj.className=="link01"){ childObj.style.display = "block"; }else{ childObj.style.display = "none"; } } if(no == 2){ if(childObj.className=="link02"){ childObj.style.display = "block"; }else{ childObj.style.display = "none"; } } if(no == 3){ if(childObj.className=="link03"){ childObj.style.display = "block"; }else{ childObj.style.display = "none"; } } } } } ■css .link01 { display:block; margin-bottom:10px; } .link02 { display:none; margin-bottom:10px; } .link03 { display:none; margin-bottom:10px; }

  • 表示・非表示の度にURLにパラメーター表示

    初心者なので間違っていることもあるかもしれませんが、よろしくお願いします。 サーバーサイドの言語ではないので無理だろうなとは思っていますが、念の為に詳しい方にお聞きしたいことがあります。 現在サイトを開設していてリンクをクリックしたらその下にサンプルテキストが表示・非表示で切り替わるようにしています。 1ページにこのような表示・非表示のリンクを多数設置しているのですが、クリックして表示させても当然URLはそのままです。 これをクリックした場合、例えば下記のようにすることはできるでしょうか？ http://○○.com/sample.html ↓ http://○○.com/sample.html?test このようにパラメーター？がついたURLにして表示させたりしたいのですが。そのURLにアクセスすれば、現在表示させているのがすぐ見れるように。 よくPHPやCGIでみられるやつです。 ソースは下記のようにしています。 □HTMLファイル <a href="#" class="player" onClick="showHide('TEST');return false;">テスト</a> <div id="TEST" style="display: none">サンプルテキスト</div> □外部JSファイル var objTextIDArray = new Array("TEST"); 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"; Javascriptに詳しい方に無理と言われれば諦めつくのですが。もしかしたら何か方法があるかもと思いました。 ご存知の方いらっしゃいましたら、ご教示ください。 よろしくお願いします。

  • JavaScriptで時間指定をして表示を切り替え

    JavaScriptで時間指定をして表示を切り替えたいのですが safariだけうまく動作しません、下記のjsファイルを読み込んでHTML側には <div id="hoge1">切り替え前の内容</div> <div id="hoge2">切り替え後の内容</div> としています。 解決策があればご教授お願い致します。 window.onload = changeDisplay; function changeDisplay(){ var objDate = new Date(); var now = objDate.getTime();//現在のタイムスタンプ（ミリ秒）を取得 var changeTime = new Date("Jan 1, 2011 00:00:00");//切り替える日時のタイムスタンプ（ミリ秒）を取得 //切り替え前 if (now < changeTime) { document.getElementById('hoge1').style.display = "block"; document.getElementById('hoge2').style.display = "none"; setTimeout("changeDisplay()", 1000);//1秒ごとに実行（◯秒ごとの場合は、第2引数に 「◯ * 1000」 と記述） //切り替え後 } else { document.getElementById('hoge1').style.display = "none"; document.getElementById('hoge2').style.display = "block"; } }

  • FlashからJavascriptを動作させるには？

    FlashからJavascriptを動作させるには？ よろしくお願い致します。 以下のようなJavascriptのコードがあります。 リンクをクリックすると隠れている領域（div）が表示されるというものなのですが、 このリンクをFlashにして動作させたいと思っています。 その場合、どのようなコードをFlashに記入すればよいのでしょうか？ ■Javascriptのコード（外部jsにしています） function showHide(targetID) { if( document.getElementById(targetID)) { if( document.getElementById(targetID).style.display == "none") { document.getElementById(targetID).style.display = "block"; } else { document.getElementById(targetID).style.display = "none"; } } } ■HTMLのコード <a href="#hoge" onclick="showHide('hoge');return false;">隠れている領域を表示</a> <div id="hoge" style="display:none;"> </div> 説明不足のようでしたら、補足説明致します。 どうぞご教授下さいますようお願い致します。

    • ベストアンサー
    • Flash
  • javascriptでid要素の取得について

    お世話になります。 最近、javascriptの勉強を始めたたのですが、 以下の違いがよくわかりません。 ------------------------------------------------------- <html> <head><title>Test</titile></head> <body> <div id='wrapper'></div> </body> </html> <script language='javascript'> function aaa() { document.getElementById("wrapper").style.display = "none";//---(1) wrapper.style.display = "none"; //---(2) } </script> (2)は、document等省略してますが、その違いは無視して 頂ければと思います。 (1)でわざわざgetElementByIdを使用してid要素を取得 するメリットがわかりません。 初心者の質問で申し訳ありませんが、よろしくお願い致します。

  • javascriptでボックスの表示非表示

    javascriptでボックスにマウスオーバーすると、同じ位置に別のボックスを表示させたいと考えています。 以下のようにしてみましたが、ie9ではできたのですが、 ie6、ie7、ie8ではdiv1とdiv2が横に並んでしまいました。 何か解決方法があれば教えてください。 よろしくお願いいたします。 <script type="text/javascript"> window.onload = function() { div1 = document.getElementById("div1"); div2 = document.getElementById("div2"); div1.onmouseover = function() { div1.style.display = "none"; div2.style.display = "block"; }; div2.onmouseout = function() { div1.style.display = "block"; div2.style.display = "none"; }; div1.style.display = "block"; div2.style.display = "none"; }; </script> <div id="div1" class="box01"> <div id="pic"><img src="image01.gif"></div> <div id="txt">てきすとてきすと</div> </div> <div id="div2" class="box02"> <div id="pic"><img src="image02.gif"></div> <div id="txt">てきすとてきすと</div> </div>

  • JavaScriptで見出しをクリックすると、詳細内容が表示される。

    JavaScriptで見出しをクリックすると、詳細内容が表示される。 今、JavaScriptを使って、見出しをクリックすると、詳細内容が表示される部分を作成しているのですが、私はJavaScript初心者で、本を見ながらやっています。 詳しく言うと、左カラムに「menu1」「menu2」「menu3」とあって「menu1」をクリックすると、下にそのカテゴリが表示され、もう一度クリックすると非表示になるというものを作っています。 せめてJavaScriptの基礎でも分かってからやればいいのですが、仕事で急きょやることになり時間もありませんので、本を見ながらやっています。 今、以下のようになっていますがクリックしても表示されません。 // JavaScript Document function changeDisplay(id){ var elem=document.getElementByld(id); elem.style.display=elem.style.display=="none"? "block":"none"; } //html <span onClick="changeDisplay('open01');">menu1</span> <div id="open01" style="display:none;"> ボタン1 </div> 初心者で分かりませんがJavaScriptの1行目「function changeDisplay(id){」の「id」を何かにかえるのでしょうか？ どなたか分かるかた教えてください。

  • jabascriptの表示・非表示について

    初心者です。 このタグでは、最初から「ここを表示する」が表示されるのですが、最初は表示されずに、「表示」ボタンを押すと初めて表示されるようにするにはどのようにすればいいのでしょうか。。 <p> <a href="#" id="link_view2" onClick="toggle_view2();return false;" style="display:none;">表示</a> <a href="#" id="link_hidden2" onClick="toggle_hidden2();return false;">非表示</a> </p> <div id="area_hoge2"> <p>ここを表示する</p> </div> <script language="JavaScript" type="text/javascript"> <!-- var elem2_1 = document.getElementById("area_hoge2"); var elem2_2 = document.getElementById("link_view2"); var elem2_3 = document.getElementById("link_hidden2"); function toggle_view2() { elem2_1.style.display = ""; elem2_2.style.display = "none"; elem2_3.style.display = ""; } function toggle_hidden2() { elem2_1.style.display = "none"; elem2_2.style.display = ""; elem2_3.style.display = "none"; } --> </script> 参考 http://pentan.info/javascript/sample/view_hidden.html 詳しい方お教えください<m(_ _)m>

  • cssでdisplay:noneを指定した時のプルダウンメニュー

    こんにちは、JavaScriptでプルダウンメニューを作ろうとして cssで予めdisplay:none;を指定したところ、 メニューがクリックしても開かなくなってしまいました。 html、css、JavaScriptの記述は以下の通りです。 html --------------------------------------- <span onclick="PullDown('term1')">クリック</span> <div id="term1"> <ul> <li>***********</li> <li>***********</li> </ul> </div> ----------------------------- css ------------------------------ div#term1 { display: none; } ------------------------------- JavaScript ------------------------------- function PullDown(id){ if(document.getElementById(id).style.display == 'none') document.getElementById(id).style.display=''; else document.getElementById(id).style.display='none'; } --------------------------------- cssの記述部分を無くすとちゃんと開いたり閉じたりと動作します。 また、 function Init(){ document.getElementById("term1").style.display="none"; } とJavaScriptで書いて、 bodyタグの所で <body onload="Init()">として呼び出してロード時に隠すようにするとちゃんと開閉してくれます。 cssでdisplay:none;と書くと動かなくなる理由と、 対策が分かる方居ましたら教えてください。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する