プロが教える店舗＆オフィスのセキュリティ対策術

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

解決済

  • 質問者：patsaysnow
  • 質問日時：
  • 回答数：3件

クリックで特定の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;">に変えるだけで、文字色も変わるようにできれば一番良いのですが、そのような方法はあるのでしょうか？

分かりにくい箇所は補足説明致しますので、どうぞご教授下さいますようお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： Chaire
  • 回答日時：

ハイパーリンクを使うなら、きちんとリンクをつなげて下さい。

今どきのブラウザなら、下記だけで表示・非表示の切り替えが可能です。
※今どきでなくとも、スクリプトありきの 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 から参照できるのでアクセシビリティ的にやや有利なのですが（しかも、スクリプト未経験者にも扱いやすくはなる）、それはご希望でないとのことで省きます。
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2010/08/12 02:29

No.2

  • 回答者： yyr446
  • 回答日時：

こおすればどうでしょう（全角空白は半角空白にかえてね）



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"などという記述はしません
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2010/08/12 02:25

No.1

  • 回答者： yamada_g
  • 回答日時：

簡易的なものですが、こんなのではどうですか？



//処理設定要素のプレフィックス
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連番'と配置しておけば希望の動きになると思います。
質問の意図が違ってたらすみません。
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2010/08/12 02:21

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報