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

2010/08/11 15:36

このQ&Aのポイント

クリックで特定のdiv要素が表示されるJavascriptに追加機能を持たせたい場合、idを指定せずに複数のdiv要素を対象にする方法があります。
具体的には、showHide関数の引数を変えることで、異なるdiv要素を操作できます。
また、それに応じてリンク要素のidやdiv要素のidも変更する必要があります。

patsaysnow
お礼率77% (89/115)

JavaScript
回答数3
ありがとう数8

みんなの回答 （3）
専門家の回答

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

ベストアンサー

Chaire
ベストアンサー率60% (79/130)

2010/08/11 23:57 回答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 から参照できるのでアクセシビリティ的にやや有利なのですが（しかも、スクリプト未経験者にも扱いやすくはなる）、それはご希望でないとのことで省きます。

質問者

お礼 2010/08/12 02:29

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

ログインすると、全ての回答が全文表示されます。

その他の回答 (2)

yyr446
ベストアンサー率65% (870/1330)

2010/08/11 18:59 回答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"などという記述はしません

質問者

お礼 2010/08/12 02:25

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

ログインすると、全ての回答が全文表示されます。

yamada_g
ベストアンサー率68% (258/374)

2010/08/11 18:25 回答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連番'と配置しておけば希望の動きになると思います。質問の意図が違ってたらすみません。

質問者