- ベストアンサー
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で指示した方が簡単でしょうか？
- katzenego
- お礼率58% (24/41)
- HTML
- 回答数5
- ありがとう数5
- みんなの回答 （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はここで分かりやすいように数字にしただけで実際は英字を使っています。
関連するQ&A
- onclickで別の場所にテキストを表示させたい
<a onMouseover="this.style.textDecoration='underline'" onMouseout="this.style.textDecoration='none'" onclick="document.all.d.style.display=document.all.d.style.display=='none'?'':'none'">★★ ～ <p ID=d STYLE="display:none">●● という★★（否リンク）ではないテキストをクリックする（オンマウスオーバーで下線表示）と別の場所に●●が表示されるという支持をHTMLで出しているのですが、これをJavaScriptで指示させる事は可能でしょうか？今のままだとネスケでオンクリックが動かないので困っております…要はネスケでもIEでも動くような指示を出したいのですが…
- ベストアンサー
- JavaScript
- onMouseoverで下線表示したい（リンクではないテキスト）
リンクではないテキスト部分に <a onMouseover="this.style.textDecoration='underline'" onMouseout="this.style.textDecoration='none'"> を入れるとリンクではないテキスト部分に下線がつくのですが、同じテキストに<onclick="document.all.d.style.display= document.all.d.style.display=='none'?'':'none'"> という別の場所に別のテキストを表示する支持を入れたいのですが、一緒に入れてしまうと動いてくれません…どうしたらよいか教えてください。
- ベストアンサー
- HTML
- onclickで表示/非表示させている動きに、別ページからリンクさせるには
JavaScript初心者です。 A.htmlを作成し、リンクをクリックするとidとnumberを呼び出すことで、同じhtml内に存在する3つのページが1つだけ表示されるように、cssとJavaScriptで表示/非表示させています。 【JavaScript】 function Page(id, nu){ Num = new Array ('01', '02', '03'); for (i=0; i<3; i++) { if(Num[i] == num){ document.getElementById(id + Num[i]).style.display = "block"; } else { document.getElementById(id + Num[i]).style.display = "none"; } }; } 【CSS】 #test01 {display:block;} #test02 {display:none;} #test03 {display:none;} 【html】 <a href="javascript:void(0);" onclick="Page('test','01')">link1</a> <a href="javascript:void(0);" onclick="Page('test','02')">link2</a> <a href="javascript:void(0);" onclick="Page('test','03')">link3</a> <div id="test01"> ・・・ </div> <div id="test02"> ・・・ </div> <div id="test03"> ・・・ </div> このとき別のhtml(B.html)から、A.htmlのid="test02"が表示された状態にリンクを作成することはできるのでしょうか？ 恐れ入りますがよろしくお願い致します。
- ベストアンサー
- JavaScript
- javascript外部ファイル化の複数指定の質問です。
javascript外部ファイル化の複数指定の質問です。 一つ目 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} 二つ目 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ window.onload = function() { document.getElementById("home").onmouseover= function() {document.getElementById("sub_home").style.display="block"}; document.getElementById("home").onmouseout= function() {document.getElementById("sub_home").style.display="none"}; document.getElementById("sub_home").onmouseover= function() {document.getElementById("sub_home").style.display="block"}; document.getElementById("sub_home").onmouseout= function() {document.getElementById("sub_home").style.display="none"}; } この上記の２つのjavascriptを別々に外部ファイル化して、head内に読み込んでおります。 両方とも動作させたいのですが、下のwindow.onload のjavascriptしか動作しません。 両方、動作させるには、どのように記述すればよいのでしょうか？ どなたか教えていただけませんか？ よろしくお願い致しますm(＿ ＿)m
- 締切済み
- JavaScript
- javascriptで文章を一文字ずつ表示する。
javascriptで文章を一文字ずつ表示する。 表示されている文章をクリックすると、その文章は非表示になり次の文章に切り替わります。 displayがnoneからblockになるときに一文字ずつ表示するにはどうすれば良いでしょうか？ <script type="text/javascript"> var cnt = 0; function display(){ document.getElementById("s0"+cnt++).style.display = "none"; document.getElementById("s0"+cnt).style.display = "block"; } </script> <style> a{display:none;} #s00{display:block;} </style> <a id="s00" onclick="display();">00000</a> <a id="s01" onclick="display();">11111</a> <a id="s02" onclick="display();">22222</a> <a id="s03" onclick="display();">33333</a> <a id="s04" onclick="display();">44444</a> ・ ・ <a id="s90" onclick="display();">00000</a>
- 締切済み
- JavaScript
- 「ポタン」で表示・非表示 (つづき)(^^;
「ポタン」で表示・非表示 ブロック<Div></Div>の「表示・非表示」を「ポタン」でやりたいのですが。。の件で、下記の回答をいただき、できたのですが、 最初に「★非表示」の状態にしたい場合は、どうしたらいいのでしょうか? よろしく願いいたします。 <html> <body> <div id="a">abcdefg</div> <input type="button" value="on/off" onClick="disp('a')"> <hr> <div id="b">abcdefg</div> <input type="button" value="on/off" onClick="disp('b')"> <hr> <script> function disp(id){ // alert(document.getElementById(id).style.display=='none'?'block':'none'); document.getElementById(id).style.display = document.getElementById(id).style.display=='none'?'block':'none'; } </script>
- ベストアンサー
- JavaScript
- 特定の場所の番号を連続して入力する方法やソフト
<a onmouseover="txt1.style.display='block'" onmouseout="txt1.style.display='none'"> 上記ので「txt1」という2つの部分だけを <a onmouseover="txt2.style.display='block'" onmouseout="txt2.style.display='none'"> <a onmouseover="txt3.style.display='block'" onmouseout="txt3.style.display='none'"> 「txt2」「txt3」と書きかえていき、今現在1200まで書いてきました。 しかし「txt10000」まで書かなくてはいけません、大変なので数字の部分だけ連続して番号を書けるようになるソフトはありますでしょうか？。
- ベストアンサー
- フリーウェア・フリーソフト
- <a href="#z" onclick="">
によって onclickの動作をさせた後 <a name="z"></a>へのジャンプをさせようとしたのですが onclickの動作だけがおこなわれジャンプ動作をしません onclickで非表示の内容を表示させその表示された部分の特定の場所 にジャンプさせたいのです 何かいい方法はあるでしょうか？ よろしくお願いします <a href="#z" onclick="document.getElementById('x').style.display='block';return false"> go to 99 </a> <br/> <br/> <div id="x" style="display:none"> 1<br/> 2<br/> ............. 99<br/> <a name="z"></a> </div>
- ベストアンサー
- JavaScript
- 表示・非表示の度にURLにパラメーター表示
初心者なので間違っていることもあるかもしれませんが、よろしくお願いします。 サーバーサイドの言語ではないので無理だろうなとは思っていますが、念の為に詳しい方にお聞きしたいことがあります。 現在サイトを開設していてリンクをクリックしたらその下にサンプルテキストが表示・非表示で切り替わるようにしています。 1ページにこのような表示・非表示のリンクを多数設置しているのですが、クリックして表示させても当然URLはそのままです。 これをクリックした場合、例えば下記のようにすることはできるでしょうか？ http://○○.com/sample.html ↓ http://○○.com/sample.html?test このようにパラメーター？がついたURLにして表示させたりしたいのですが。そのURLにアクセスすれば、現在表示させているのがすぐ見れるように。 よくPHPやCGIでみられるやつです。 ソースは下記のようにしています。 □HTMLファイル <a href="#" class="player" onClick="showHide('TEST');return false;">テスト</a> <div id="TEST" style="display: none">サンプルテキスト</div> □外部JSファイル var objTextIDArray = new Array("TEST"); function showHide(targetID) { //functionの宣言。受けとったIDは変数targetIDに格納。 if( document.getElementById(targetID)) { //指定のIDのついたオブジェクトがあったら処理する //指定されたIDのstyle.displayがnoneなら if( document.getElementById(targetID).style.display == "none") { //blockに変更する for(var i = 0; i < objTextIDArray.length; i++) if(document.getElementById(objTextIDArray[i])) document.getElementById(objTextIDArray[i]).style.display = "none"; document.getElementById(targetID).style.display = ""; } else { //noneでなければ、つまりblockなら //noneにする document.getElementById(targetID).style.display = "none"; Javascriptに詳しい方に無理と言われれば諦めつくのですが。もしかしたら何か方法があるかもと思いました。 ご存知の方いらっしゃいましたら、ご教示ください。 よろしくお願いします。
- 締切済み
- JavaScript
- ジャバスクリプトの使い方
現在、webサイトを製作中なのですが、ページの上部にメニューがあり、画面中央にロゴがあり、下部にはフッターがあるという画面構成を考えております。 上部のメニューにマウスポインタが乗ったときに、中央のロゴが消えて、上部メニューの説明を表示しようと思っています。 その際、マウスオーバーで対応しようと思っています。 以下、ジャバスクリプトのコードです。 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー window.onload = function () { document.getElementById( "logo" ).onmouseover= setlogo; document.getElementById( "myMenu1" ).onmouseover = setMyBody1; document.getElementById( "myMenu2" ).onmouseover = setMyBody2; document.getElementById( "myMenu3" ).onmouseover = setMyBody3; document.getElementById( "myMenu4" ).onmouseover = setMyBody4; document.getElementById( "myMenu5" ).onmouseover = setMyBody5; document.getElementById( "myMenu6" ).onmouseover = setMyBody6; document.getElementById( "myMenu7" ).onmouseover = setMyBody7; }; function setlogo() { setNoneAll(); document.getElementById( "logo" ).style.display = "block"; } function setMyBody1() { setNoneAll(); document.getElementById( "myBody1" ).style.display = "block"; } function setMyBody2() { setNoneAll(); document.getElementById( "myBody2" ).style.display = "block"; } function setMyBody3() { setNoneAll(); document.getElementById( "myBody3" ).style.display = "block"; } function setMyBody4() { setNoneAll(); document.getElementById( "myBody4" ).style.display = "block"; } function setMyBody5() { setNoneAll(); document.getElementById( "myBody5" ).style.display = "block"; } function setMyBody6() { setNoneAll(); document.getElementById( "myBody6" ).style.display = "block"; } function setMyBody7() { setNoneAll(); document.getElementById( "myBody7" ).style.display = "block"; } function setNoneAll() { document.getElementById( "logo" ).style.display = document.getElementById( "myBody1" ).style.display = document.getElementById( "myBody2" ).style.display = document.getElementById( "myBody3" ).style.display = document.getElementById( "myBody4" ).style.display = document.getElementById( "myBody5" ).style.display = document.getElementById( "myBody6" ).style.display = document.getElementById( "myBody7" ).style.display = "none"; } ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー 上記のジャバスクリプトでマウスオーバー（上部メニューにマウスポインタが乗った場合中央のロゴが消えてメニューの説明が表示されます）が可能になるのですが、更にonMouseOutを使って、上部メニューからマウスポインタが離れたときに、中央にロゴを表示させる為の記述方法が分からなくて苦戦しております。 どなたかご指導頂けませんか？ よろしくお願い致します。
- 締切済み
- JavaScript
お礼
回答有難うございます。 同じ様なものを書き込むのもどうかと思ってJavaScriptも検討しているのですが、そのJavaScriptでも同じ様になってしまっているのでちょっと困っています…