- ベストアンサー
クリックで特定のdiv要素が表示されるJavascriptに追加機能を持たせたい
- クリックで特定のdiv要素が表示されるJavascriptに追加機能を持たせたい場合、idを指定せずに複数のdiv要素を対象にする方法があります。
- 具体的には、showHide関数の引数を変えることで、異なるdiv要素を操作できます。
- また、それに応じてリンク要素のidやdiv要素のidも変更する必要があります。
- patsaysnow
- お礼率77% (89/115)
- JavaScript
- 回答数3
- ありがとう数8
- みんなの回答 （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 から参照できるのでアクセシビリティ的にやや有利なのですが（しかも、スクリプト未経験者にも扱いやすくはなる）、それはご希望でないとのことで省きます。
その他の回答 (2)
- yyr446
- ベストアンサー率65% (870/1330)
こおすればどうでしょう（全角空白は半角空白にかえてね） 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"などという記述はしません
お礼
丁寧にお教え頂きありがとうございました。 元のコードに近い内容で、非常に分かりやすく助かりました。 ほかの方からお教え頂いたコードとともに参考にさせて頂きます。 本当にありがとうございました。
- yamada_g
- ベストアンサー率68% (258/374)
簡易的なものですが、こんなのではどうですか？ //処理設定要素のプレフィックス 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連番'と配置しておけば希望の動きになると思います。 質問の意図が違ってたらすみません。
お礼
丁寧にお教え頂きありがとうございました。 色々な実現方法をお教え頂いたので、それぞれどのような違いがあるのか まだよく分かっていないのですが、こちらの方法も参考にさせて頂きます。 本当にありがとうございました。
お礼
丁寧にお教え頂きありがとうございました。 div[id^="section"]:not(:target) { display: none; } で表示・非表示を実現できるというのには驚きました。<a href="#">が好ましくないというのも大変勉強になりました。 お教え頂いたコードも参考にさせて頂きます。 本当にありがとうございました。