- ベストアンサー
表示と非表示
下のような物があったときに、１を押したときに１が現れるのですが、続けて２を押したときに１と２が表示されてしまいます。 この時に、２を押したら、１を非表示にして２だけを表示したいのですが、可能でしょうか？ よろしくお願い致します。 <HTML><HEAD><TITLE>test</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function apper(sLayers) { if (document.all) { if (document.all(sLayers).style.display=='inline') { document.all(sLayers).style.display='none'; } else { document.all(sLayers).style.display='inline'; } } return (false); } // --> </SCRIPT> <style type="text/css"> span.hidden { position: relative; display: none } span.visiable { position: relative; display: inline } // --> </style></HEAD> <BODY> <a href="" onClick="return apper('1')">質問１</a><br> <a href="" onClick="return apper('2')">質問２</a><br> <a href="" onClick="return apper('3')">質問３</a><br> <span class="hidden" id="1">1<br></span> <span class="hidden" id="2">2<br></span> <span class="hidden" id="3">3<br></span> </BODY></HTML>
- koolm
- お礼率80% (33/41)
- JavaScript
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
#1の方針で書き直したもの --------------------------------------------------------------- <HTML><HEAD><TITLE>test</TITLE> <SCRIPT type="text/javascript"><!-- function apper(id) { if (document.getElementById) { document.getElementById('QDisp').innerHTML = document.getElementById(id).innerHTML; } return (false); } // --> </SCRIPT> <style type="text/css"><!-- span.hidden { position: relative; display: none } span.visiable { position: relative; display: inline } --> </style> </HEAD> <BODY> <a href="" onClick="return apper('Q1')">質問１</a><br> <a href="" onClick="return apper('Q2')">質問２</a><br> <a href="" onClick="return apper('Q3')">質問３</a><br> <span id="QDisp"></span> <span class="hidden" id="Q1">1<br></span> <span class="hidden" id="Q2">2<br></span> <span class="hidden" id="Q3">3<br></span> </BODY> </HTML> --------------------------------------------------------------- id に数値だけのid を指定するのはイレギュラーなので直して変更しました。 ＞for( a = 1; a < 3; a++){ a < 3 では、a は、３になる前にループを抜けてしまいます。 あと、実際に試していないので単なるコメントですが、 all( 1 ) とした場合には、（IEの場合には）配列要素のアクセスなのかid 指定のアクセスなのかよくわからないですね。 そういう意味でもid は、id たらんとしておくのがいいでしょうね。
その他の回答 (3)
>>No.2 ×:W3C <span class="hidden" id="1"...>
- yambejp
- ベストアンサー率51% (3827/7415)
クラスを宣言しているのですから、span単位で クラスを変更すればよいでしょう。 <HTML><HEAD><TITLE>test</TITLE> <SCRIPT LANGUAGE="JavaScript"> function apper(sLayers) { var spans=document.getElementsByTagName("span"); for (var i=0;i<spans.length;i++){ if(spans[i].id==sLayers){ spans[i].className="visible"; }else{ spans[i].className="hidden"; } } } </SCRIPT> <style type="text/css"> span.hidden { position: relative; display: none } span.visiable { position: relative; display: inline } // --> </style></HEAD> <BODY> <a href="#" onClick="return apper('1')">質問１</a><br> <a href="#" onClick="return apper('2')">質問２</a><br> <a href="#" onClick="return apper('3')">質問３</a><br> <span class="hidden" id="1">1<br></span> <span class="hidden" id="2">2<br></span> <span class="hidden" id="3">3<br></span> </BODY></HTML>
お礼
色々なやり方だあるんですね。 ありがとうございました。
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
もちろんできますけど、 ある質問が選ばれた時、 （表示されているかもしれない）他の質問を非表示にする必要がある ってことですよね。 質問の数が多くなると面倒くさそうなので、 表示する領域（当初は空）を作っておいて、 質問が選ばれる度にそちらにコピーするというのはどうですか
お礼
早速の回答ありがとうございます。 イメージファイルが読み込めて、改行できるならばその方法で大丈夫です。 あと出来れば、ページ数を少なくしたので、一回答一つのＨＴＭＬというのはさけたいです。 for文でプロパティをnoneにしてみたのですが、駄目でした。 質問を重ねてしまいすが、後学のため下の文章はどこが間違っているのでしょうか？ for( a = 1; a < 3; a++){ document.all(a).style.display='none'; }
お礼
とても参考になりました。ありがとうございました。 これから、完全に理解するよう調べてみます。