- ベストアンサー
onclickで別の場所にテキストを表示させたい
先程も質問させて頂いたのですが、問題にぶち当たったので再度お願いしますm(＿＿)m <a onMouseover="this.style.textDecoration='underline'" onMouseout="this.style.textDecoration='none'" onclick="document.getElementById('1').style.display= document.getElementById('1').style.display=='none'?'':'none'">★★ <p ID=1 STYLE="display:none">●● で、★★をクリックすると「別の場所にある●●」が表示されるように指示を出しているのですが、 ★★が複数あり其々表示される●●も違う、だが●●が表示される場所は同一の場所にしたい、 というのを目指しているのですが、上記の場合だと ★★1をクリックした後に★★2をクリックすると●●1がそのまま残ったその下に●●2が表示されてしまいます。 ★★1をクリックした後で★★2をクリックした時結果として●●2だけを表示させたいのですが、どうしたらいいでしょうか…？ それが5つぐらい予定しているのですが…JavaScriptで指示した方が簡単でしょうか？
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
これでいけると思いますが、「簡単」とかではなく、このままではとても読めない状態になってくると思います。scriptはscriptで分けたほうがよいですよ。 見てお分かりでしょうが、すでに重複箇所だらけになってます。 <html> <head> <script language="Javascript"> </script> </head> <body> <a onMouseover="this.style.textDecoration='underline'" onMouseout="this.style.textDecoration='none'" onclick="document.getElementById('1').innerHTML='●●'">★★</a> <a onMouseover="this.style.textDecoration='underline'" onMouseout="this.style.textDecoration='none'" onclick="document.getElementById('1').innerHTML='■■'">★★</a> <a onMouseover="this.style.textDecoration='underline'" onMouseout="this.style.textDecoration='none'" onclick="document.getElementById('1').innerHTML='▲▲'">★★</a> <p ID=1></p> </body> </html>
その他の回答 (4)
- koutarou504
- ベストアンサー率44% (182/407)
＞JavaScriptで指示した方が簡単でしょうか？ 一応、onclick の記述も JavaScript と思われますが(VBScriptではないと思うけど)。 当然、JavaScript にて HTML の属性値を書き換える事により CSS を変えるという動作を、CSS なしで JavaScript でテキスト情報を書き換える方が簡単かなという意識ですよねぇ・・・。 そこからして不安を感じますがぁ～。 で、まず onMouseover , onMouseout 共に例示している意味が不明・・・。特に #2 の方への礼文に「IDはここで分かりやすいように」と例文の書き換えをしているのなら、この２つのイベントを書かない事こそ判りやすさでしょうに・・・。 問うているのは、onclick イベントと明確にしているし・・・。 次にonclick イベント。ＩＤの指示以外は全て同じ動作という事で、関数としてそれを呼び出す事で簡素化は容易・・・。その上、ＩＤという文字列に規則性を持たせれば、概念としては難しいですが onclick イベントを書き換えるというか上書きしてしまってもその要素のＩＤ（this.id）からいろいろと情報が引き出せます。なにせＩＤの文字に規則性（意味）がある訳ですから・・・。とはいえ、感覚的な理解が難しいので、まずは関数の呼び出しから。どこから呼んだかというか何をさせたいかという情報は引数を渡す事で・・・。 そして肝心のイベントでの処理の事。 初期表示は非表示。処理により表示する。そしてまた非表示にしたいというのならその処理が必要でしょう。 後始末という処理のタイミングはないのですから、表示という処理の前準備として先の後始末というか初期化というか処理をするしかないでしょう。 後始末なら、表示した時にどこかに何が表示中かという情報を保持しておけば、その情報を元に表示中の物を非表示にすればよく、初期化と考えれば対象となる物全てを改めて非表示と操作する。ここでもＩＤに規則性を持たせておけば、その内容により対象を制御する事も容易です。単に getElementsByTagName("p") とすると、該当ソース内の全ての P 要素が対象となってしまうので関係ない P 要素があってもそれだけでは区別が無理です・・・。 尚、ここまで言いながらなんですが、CSS が無効とされたブラウザでは、全て隠しているつもりの物が見えてしまいます。 元から気にしない，考慮しないなら別ですが、そうでないなら、意味から察するに JavaScript でテキスト情報を書き換えるのが望ましいと。
お礼
回答有難うございます。 勉強させていただきますm(＿＿)m
- cyokokichi
- ベストアンサー率21% (32/152)
<html> <head> <title>テスト</title> <style type="text/css"> <!-- .anchor a:hover {text-decoration:underline} .anchor a {text-decoration:none} #div p {visibility:hidden} --> </style> </head> <body> <div class="anchor"> <a href="javascript:display(0)">★★</a> <a href="javascript:display(1)">★★</a> <a href="javascript:display(2)">★★</a> <a href="javascript:display(3)">★★</a> <a href="javascript:display(4)">★★</a> </div> <div id="div"> <p>●●</p> <p>●●</p> <p>●●</p> <p>●●</p> <p>●●</p> <script type="text/javascript"> <!-- function display(no) { var obj = document.getElementById('div').getElementsByTagName("p"); for(i=0;i<obj.length;i++){ obj[i].style.visibility="hidden"; } obj[no].style.visibility="visible"; } //--> </script> </div> </body> </html> こんなのは嫌いですか？
お礼
回答有難うございます。 何だか複雑な感じになるんですね… 早速使ってみたいと思います！有難うございました！！
- yambejp
- ベストアンサー率51% (3827/7415)
displayで表示非表示するのではなく innerHTMLを書き換えるようにすればご希望の仕様に 近くなると思います。 ちなみに＃２のレスにある 「分かりやすいように数字にした」というのは みじんにも分かりやすくありませんので、 あまり自分にしかわからないルールをなんの 注釈もなくお書きにならないほうが、適切な 回答がつきやすいとおもいます。
お礼
回答有難うございます。 分かり辛い書き方をしたのはスイマセンでしたm(＿＿)m 自分なりに伝わりやすいかなと思ったのですが、思い違いだったようです。ご指摘有難うございました。
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
質問内容については、ちょっとよくイメージできないので ID についてアドバイス http://www.w3.org/TR/html401/types.html#type-name を見て貰うと判ると思いますが、 ID は英字始まりでなくてはいけません。（数字だけのものは使えない）
お礼
回答有難うございます。 IDはここで分かりやすいように数字にしただけで実際は英字を使っています。
お礼
回答有難うございます。 同じ様なものを書き込むのもどうかと思ってJavaScriptも検討しているのですが、そのJavaScriptでも同じ様になってしまっているのでちょっと困っています…