電子書籍の厳選無料作品が豊富！

CSSのID名に配列を使えませんか？

解決済

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

以下のようなソースで、項目ごとにサブメニューの開閉をしようとしているのですが、サンプルの#a1～に該当するID名を、配列として定義することってできませんか？

<style type="text/css"><!--
#a1 { display:none; }
#a2 { display:none; }
#a3 { display:none; }
// --></style>
<script type="text/javascript"><!--
function disp(aaa) {
obj = document.getElementById(aaa);
if( obj.style.display =="block" ){
obj.style.display ="none";
}else{
obj.style.display ="block";
}
}
function create(bbb){
document.write(bbb);
}
// --></script>
<body>
ああああ<a href="javascript:void(disp('a1'))">◎</a><div id="a1"><script type="text/javascript">create("アアアア");</script></div><br>
いいいい<a href="javascript:void(disp('a2'))">◎</a><div id="a2"><script type="text/javascript">create("イイイイ");</script></div><br>
うううう<a href="javascript:void(disp('a3'))">◎</a><div id="a3"><script type="text/javascript">create("ウウウウ");</script></div><br>

通報する

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

質問の本文を隠す

A 回答 (3件)

No.1ベストアンサー

  • 回答者： yambejp
  • 回答日時：

idの仕様上無理です。

またやる必要もないと思います。

本件の場合アンカーの直後のdivタグの表示／非表示をきりかえるという
仕組みでしたら、いかのようにしてみてはいかがでしょうか？

<style type="text/css">
.hide{ display:none; }
</style>
<script type="text/javascript">
function disp(obj) {
while(obj){
if(obj.nodeName=="DIV"){
obj.className=obj.className=="hide"?"":"hide";
obj=obj.parentNode.lastChild;
}
obj=obj.nextSibling;
}
return false;
}
</script>
ああああ<a href="#" onClick="return disp(this)">◎</a><div class="hide">アアアア</div>
いいいい<a href="#" onClick="return disp(this)">◎</a><div class="hide">イイイイ</div>
うううう<a href="#" onClick="return disp(this)">◎</a><div class="hide">ウウウウ</div>

この回答への補足

できました。ありがとうございます。

補足ですが、class="hide"内にも、非表示にするボタンを

<div class="hide">
<a href="#" onclick="return disp2(this)">×</a>
アアアア
</div>

というように設置したい場合は、どのようにfunction disp2(obj)を
記述すればよいのでしょうか…

補足日時：2008/05/27 14:24
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

解決しました。ありがとうございました。
ノードの参照をもっと勉強しようと思います。

通報する
お礼日時：2008/05/27 15:45

No.3

  • 回答者： yambejp
  • 回答日時：

あ、falseを返してあげてください



function disp2(obj) {
obj.parentNode.className="hide";
return false;
}
    • good
    • 0
    • 件
通報する
この回答へのお礼

解決しました。ありがとうございました。
ノードの参照をもっと勉強しようと思います。

通報する
お礼日時：2008/05/27 15:47

No.2

  • 回答者： yambejp
  • 回答日時：

その場合、アンカーの親ノードのクラス名を変更するだけですので、


以下のようにすると効率的でしょう

function disp2(obj) {
obj.parentNode.className="hide";
}
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

関連するカテゴリからQ&Aを探す

今、見られている記事はコレ!

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

Q質問する（無料）

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

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

おすすめ情報