Javascriptでテキストやリンクの表示・非表示を可能にする方法
- Javascriptを使用して、テキストやリンクを表示または非表示にする方法を説明します。
- クリックすることでテキストと非表示リンクを表示させる手法を提供します。
- 再度表示させる方法がなくなる問題についての解決策を求めています。
- ベストアンサー
テキストやリンクの表示・非表示
Javascriptでテキストやリンクの表示や非表示をできるようにしたいです。 基本はテキストやリンクを非表示にして、”表示”リンクを表示させ、 ”表示”リンクをクリックすると、テキストと”非表示”リンクを表示させます。 しかし下のソースで実行をすると 最初、”表示”リンクのみ表示→”表示”リンクをクリック 次、テキストと”非表示”リンクを表示→”非表示”リンクをクリック 次、全て非表示 と、なってしまい、再度表示させることができなくなってしまいます。 よい解決方法があったら教えてください。 よろしくお願いします。 ========================================================== <html> <head> <title>表示・非表示テスト２</title> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <script language="javascript"> <!--// var typ; var typ2; function setDisplay(typ,typ2){ document.getElementById("myText").style.display = typ; document.getElementById("myText2").style.display = typ2; } //--> </script> </head> <body> <DIV ID="myText" style="display:none"> Display Sample<br> <a href="javascript:setDisplay('none','blcok');">非表示</a><br> </DIV> <br> <DIV ID="myText2"> <a href="javascript:setDisplay('block','none');">表示</a><br> </DIV> <br> </body> </html>
- natukimm
- お礼率100% (3/3)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
＞ <a href="javascript:setDisplay('none','blcok');">非表示</a><br> スペルミス(blcok→block)
関連するQ&A
- 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でテキストがボタンを押すと表示/非表示と切り替わるようにしたいです。 サイトを参考に試してみましたが一か所しか表示/非表示となりませんでした。 1行おきに表示/非表示としたいのでブロック単位では指定出来ません。 display構文を使って作りました。 div idがそれぞれの部分に必要かと思い、div id="○○a"、div id="○○b"という風に付けましたがうまくいきませんでした。 ↓このような形にしたいです あいうえおかきくけこ サシスセソタチツテト ←この行を表示/非表示 なにぬねのはひふへほ マミムメモヤユヨ ←この行を表示/非表示 こういう風なように打ちました。 あいうえおかきくけこ<br> <div id="disp">サシスセソタチツテト</div><br> なにぬねのはひふへほ<br> <div id="disp">マミムメモヤユヨ</div><br> <form> <input type="button" value="表示" onclick="Hyoji1(0)"> <input type="button" value="非表示" onclick="Hyoji1(1)"> </form> <script type="text/javascript"> <!-- function Hyoji1(num) { if (num == 0) { document.getElementById("disp").style.display="block"; } else { document.getElementById("disp").style.display="none"; } } // --> </script> どの辺りを間違っているでしょうか?宜しくお願い致します。
- ベストアンサー
- JavaScript
- リンク押下でタグを書き換えたい
リンクが複数あって、押したリンク文字だけ<span></span>のみにしたいと 思っています。また対応するdivタグのdisplay属性も書き換えたいです。 とりあえず思いついたのは以下の方法なのですが、冗長ですし、 リンクの数が増えた場合に足していくのが大変です。 もっとシンプルに書く方法がないものでしょうか。 ご助言ください。 <html> <body> <script> function change(spanid,divid,menuName){ document.getElementById('menu1').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu1','div1','メニュー1')\">メニュー1</a>"; document.getElementById('div1').style.display="none"; document.getElementById('menu2').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu2','div2','メニュー2')\">メニュー2</a>"; document.getElementById('div2').style.display="none"; document.getElementById('menu3').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu3','div3','メニュー3')\">メニュー3</a>"; document.getElementById('div3').style.display="none"; document.getElementById(spanid).innerHTML = menuName; document.getElementById(divid).style.display="block"; } </script> <ul> <li><span id="menu1">メニュー1</span></li> <li><span id="menu2"><a href="javascript:void(0)" onclick="change('menu2','div2','メニュー2')">メニュー2</a></li> <li><span id="menu3"><a href="javascript:void(0)" onclick="change('menu3','div3','メニュー3')">メニュー3</a></li> </ul> <div id="div1"> test1 </div> <div id="div2" style="display:none"> test2 </div> <div id="div3" style="display:none"> test3 </div> </body> </html>
- ベストアンサー
- JavaScript
- クリックで特定のdiv要素が表示されるJavascriptに追加機能を
クリックで特定の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;">に変えるだけで、文字色も変わるようにできれば一番良いのですが、そのような方法はあるのでしょうか？ 分かりにくい箇所は補足説明致しますので、どうぞご教授下さいますようお願い致します。
- ベストアンサー
- JavaScript
- クリックで表示/非表示の切り替え
私は今現在HPを作成しているのですが、その中の特定のページでテキストをクリックしたら表示/非表示の切り替えをしたいと考えてます。 表示/非表示自体は検索して出てきたオープンソースを拝借したら出来ました。 ソースは下記のように記述してます。 しかし、既存の状態だと『テキスト1』をクリックして表示させたらもう一度『テキスト1』をクリックしない限り非表示にはなりません。 『テキスト1』をクリックして表示している状態で『テキスト2』をクリックしたら自動的に『テキスト1』の表示されてる部分を非表示しにしたいのですが。 <head> <SCRIPT type="text/JavaScript"> <!-- function showHide(targetID) { //functionの宣言。受けとったIDは変数targetIDに格納。 if( document.getElementById(targetID)) { //指定のIDのついたオブジェクトがあったら処理する //指定されたIDのstyle.displayがnoneなら if( document.getElementById(targetID).style.display == "none") { //blockに変更する document.getElementById(targetID).style.display = "block"; } else { //noneでなければ、つまりblockなら //noneにする document.getElementById(targetID).style.display = "none"; } } } //--> </SCRIPT> </head> <body> <a href="#" onClick="showHide('SH-001');return false;">テキスト1</a> <a href="#" onClick="showHide('SH-002');return false;">テキスト2</a> <div id="SH-001" style="display: none">テキスト1をクリックしたら表示される部分</div> <div id="SH-002" style="display: none">テキスト2をクリックしたら表示される部分</div> </body> Javascriptについてはまだ知識がなく解決方法が皆目見当もつきません。 ご存知の方いらっしゃいましたらご教示ください。 よろしくお願いします。
- ベストアンサー
- JavaScript
- 引数の使い方について
以下はツリーメニューを表示するスクリプトです。 *********************************** <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title></title> <script> <!-- function FUNC(Tname){ Tmenu=Tname.style; if(Tmenu.display=="none"){ Tmenu.display="block"; } else{ Tmenu.display="none"; } } //--> </script> </head> <body> <a href="javascript:FUNC(div1)">ツリーメニュー</a> <div id="div1" style="display:none;"> <a href="#">aaaaaa</a><br> <a href="#">bbbbbb</a><br> <a href="#">cccccc</a><br> </div> </body> </html> *********************************** この場合、styleまでの階層を変数Tmenuに代入して、 それ以後はその変数Tmenuを使用しているわけですが、 変数Tmenuを宣言せずに、直接Tnameで階層を表現しようとしたらエラーになります。 (<script></script>内を以下のように記述した場合です) <!-- function FUNC(Tname){ if(Tname.display=="none"){ Tname.display="block"; } else{ Tname.display="none"; } } //--> なぜ引数をそのまま階層に使ったらエラーになるでしょうか? よろしくお願いします<(_ _)>
- ベストアンサー
- JavaScript
- javascriptでツリー表示
javascriptでツリー表示をしたいのですが、全くの素人で、一番やりやすそうなソースを見つけ、『“tree1”を変更して使用』と説明にはあったのですが、実際には『JavaScript:ok('tree1');"』とアドレスに表示されるだけで、目的のツリー表示をしてくれません。 どうしたら、良いでしょうか？ <SCRIPT language="JavaScript"> <!-- function ok(id){if(document.all(id).style.display == "none"){document.all(id).style.display="block";}else{document.all(id).style.display="none";}} //--> </SCRIPT> <B><A HREF="JavaScript:ok('tree1');">■メニュー</A></B><BR> <DIV ID="tree1" style="display:none;"> ┣ あああ<BR> ┣ いいい<BR> ┣ ううう<BR> ┣ えええ<BR> ┗ おおお<BR> </DIV>
- ベストアンサー
- JavaScript
- 折たたみメニューの表示・非表示
JavaScriptで下記のような折りたたみ（階層）メニューを作成しています。 <script type="text/javascript"> <!-- /* ブラウザ判別 */ var ie=document.all ? 1 : 0; var ns6=document.getElementById&&!document.all ? 1 : 0; var opera=window.opera ? 1 : 0; /* 子メニューの表示・非表示切替 */ function openFolder(childObj, parentObj){ var child=""; var parent=""; var sw="../../images/blanc.gif"; /* フォルダ表示時のアイコン画像 */ var hd="../../images/blanc.gif"; /* フォルダ非表示時のアイコン画像 */ if(ie || ns6 || opera){ child=ns6 ? document.getElementById(childObj).style : document.all(childObj).style; parent=ns6 ? document.getElementById(parentObj) : document.all(parentObj); if (child.display=="none"){ child.display="block"; parent.src=sw; }else{ child.display="none"; parent.src=hd; } } } //--> </script> <div id="open_1" style="display:none;"> <a href="01.html"><img src="images/list_01.gif"></a><br> <a href="02.html"><img src="images/list_02.gif"></a><br> </div> <div id="open_2" style="display:none;"> <a href="03.html"><img src="images/list_03.gif"></a><br> <a href="04.html"><img src="images/list_04.gif"></a><br> </div> <div id="open_3" style="display:none;"> <a href="04.html"><img src="images/list_03.gif"></a><br> <a href="05.html"><img src="images/list_04.gif"></a><br> </div> ここで、<div id="open_1">内のリンクをクリックして01.htmlに遷移した際、01.htmlでも<div id="open_1">内の階層が表示されているようにしたいのです（下のふたつの階層についても同じです）。 過去ログなどを調べまして、 <script type="text/javascript"><!-- function keepOpen(){ document.getElementById('x').style.display = "block"; document.getElementById('y').style.display = "block"; }keepOpen(); //--></script> を挿入すればいけそうでやってみたのですが、今度は開きっぱなしになってしまいます。二日ほど調べたのですが、よい解決策が見つかりません（また、<div>の中のソースはすでにphpのコードを組込んでいるので、できれば中の部分はいじりたくありません）。 お詳しい方、大変恐れ入りますが、どうぞご教示くださいませ。 よろしくお願いいたします。
- ベストアンサー
- 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
- 表示・非表示の度に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
お礼
早速直したところ、思うように動きました！ なんて単純なところで・・・。（汗） どうもありがとうございました。