クリックすると下に説明文が出るものを作りたい。| OKWAVE

クリックすると下に説明文が出るものを作りたい。

ホームページで辞典を作ろうと思っています。クリックすると、その単語の説明が下に表示されて、再度クリックすると、表示が閉じるタイプのものが作りたいのですが、現在私が作っているものではエラーが出ます。 <HTML> <HEAD> <TITLE>単語辞典</TITLE> <SCRIPT language="JavaScript"></SCRIPT> <STYLE type="text/css">  </STYLE> </HEAD> <BODY> <I>あ行</I><BR> <A onClick=" sld('01')">■単語<BR> </A> <DIV style="DISPLAY:none; class=sld id=01">単語の説明文</DIV> </BODY> </HTML> ※エラーは<A onClick=".....">のAの部分で「オブジェクトを指定してください」と出てきます。どなたかお願いします。

常にひとつだけ詳細表示する！の回答なのだけれど

<html> <head> <style> .show {display:block;} .hide {display:none;} </style> <script> function yomu(n){ oj=document.getElementById('a').getElementsByTagName('DIV'); for(var i in oj) oj[i].className=(i==n)?'show':'hide'; } </script> </head> <body> <div id="a"> <a href="#" onClick="yomu(0)">A</a><br> <div class="hide">Aの詳細</div> <a href="#" onClick="yomu(1)">B</a><br> <div class="hide">Bの詳細</div> <a href="#" onClick="yomu(2)" >C</a><br> <div class="hide">Cの詳細</div> </div> </body> </html>

クリックカウンター

クリックカウンターでの質問です。次の人になるとまた「0」になってしまいます。どうしてなのでしょう？　どなたか直していただけないでしょうか。 <HTML> <head> <Script language="JavaScript">  </Script> </head> <BODY> <center> あなたは<span id="Ninzu">0</span>人目です。<br> <input type=button value="クリックしてね" onClick="f_click()"> </center> </BODY> </HTML>

プルダウンメニューに画像を使用するには？

JavaScript初心者です。過去の質問 http://oshiete1.goo.ne.jp/kotaeru.php3?q=1886905 にあるソースを利用してみたいのですが、メニューの頭にあるボタンを画像（オリジナルのアイコン）に変えたいのですが、どのようにすればよいでしょうか？ボタンのタグはなんとなく分かるのですが、差し替え方が全く分かりません。 ↓これが、そのソースです。宜しくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS"> <title>サンプル</title> <style>  </style> <script type="text/javascript">  </script> </head> <body> <div><input type="button" value="＋" onClick="changeFold(this)">メニュー１<div class="inside"> もろもろ<br /> <a href="index.html">トップ</a><br /> <a href="sub.html">サブ</a><br /> </div> </div> <div><input type="button" value="＋" onClick="changeFold(this)">メニュー２<div class="inside"> また別のもろもろ<br /> <a href="index2.html">トップ２</a><br /> <a href="sub2.html">サブ２</a><br /> </div> </div> </body> </html>

JQueryでクリック時のタグの親子の関係について

以下のコードのspanをクリックするとspanとdivをクリックしたことになってしまいます。 spanをクリックしてもdivをクリックしたことにしないようにするにはどうすればよいのでしょうか？ <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <style> div { padding: 20px; background: #EEE; } </style> <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script> $(function(){ $("div").click(function(){ console.log("click div"); }); $("span").click(function(){ console.log("click span"); }); }); </script> </head> <body> <div> <span>Click!</span> </div> </body> </html>

z-indexを指定したボックスの下に表示させる

z-indexとjavascriptを組み合わせて下記のようなページを作っています。 <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>ああああ</title> <meta http-equiv="Content-Script-Type" content="text/JavaScript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <script type="text/javascript">  </script> <style type="text/css"> div#aaa { z-index: 2; position:absolute; width: 300px; } div#bbb { z-index: 1; position:absolute; width: 300px; } </style> </head> <body> <h1>あああ</h1> <p><a onclick="MM_showHideLayers('aaa','','show','bbb','','hide')">ううう</a> / <a onclick="MM_showHideLayers('aaa','','hide','bbb','','show')">えええ</a></p> <div id="aaa" style="visibility:visible"> <h2>ううう</h2> <p>うううううううう<br /> うううううううう</p> </div> <div id="bbb" style="visibility:hidden"> <h2>えええ</h2> <p>えええええええええ<br /> えええええええええ<br /> えええええええええ<br /> えええええええええ<br /> えええええええええ</p> </div> <p>いいいいいいいいい<br /> いいいいいいいいい</p> </body> </html> 切り替わるdivの下に<p>いいいい</p>を表示させたいのですが、後ろに回って表示されません。これを表示させる方法をご存じでしたら教えてください。

クリックする度に表示/非表示が切り替わるスクリプト

クリックする度に表示/非表示が切り替わるスクリプト Content1をクリックするとSubContentsの表示/非表示が切り替わるスクリプトを組みたいのですが、下記スクリプトのjavascript内で表示/非表示の実現方法がよくわかりません。調べるとStyleのVisibilityという要素(?)を指定することで表示/非表示が切り替えられる可能なのは分かったのですが、具体的にはどんなプログラムを組めばいいのか分かりません。どなたかご教授お願いします。 <html> <head> <title>Template</title> <style type="text/css"> span.content{ background-color: #FFCC66; width: 100; height: 20; } div.subcontent { position: absolute; top: 40px; left: 40px;} </style> <script language="javascript"> function cont_pop(){ //ここをどうすれば良いでしょうか？ } </script> </head> <body bgcolor=#EEEEEE> <span id="cont1" class="content" onClick="cont_pop()">Content1</span><BR> ↓これを表示/非表示させたい <div class="subcontent" id="scon1"> SubContents </div> </body> </html>

overflowを使ってのスクロール

CSSのoverflowを使って、ページの一部をスクロールさせたいのですが完全に下までスクロールができません。具体的には以下のソースの"div2"をスクロールさせたく、overflowのauto を使っているのですが、一番下までスクロールができません。どのようにしたらよいか、ご指摘お願いいたします。 HTMLのソースは以下の通りです。このままコピペしてもらえば動作を確認してもらえると思います。どうかよろしくお願いいたします。 <html> <head> <style type="text/css"> body { overflow: hidden; } div { border: 1px solid black; } #div2 { height: 100%; overflow: auto; } </style> </head> <body> <div id="div1"></div><br> <div id="div2"></div> </body> <script type="text/javascript"> var text = ""; for (var i=0; i<10; i++) text += "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>"; document.getElementById('div1').innerHTML = text; for (var i=0; i<150; i++) text += "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>"; document.getElementById('div2').innerHTML = 'BEGIN<br>' + text + 'END'; </script> </html>

IE borderの下まで背景 paddingの下まで背景

以下のhtmlを参照してください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>背景</title> <style> div {background-color:#CCCCFF;border:dashed 1px #FFCCCC;} </style> </head> <body style="margin:0px;"> ＠IE7での話です。背景がborderの下まで表示されるかどうか。 <br> <div>指定無しMＭ同字口()□</div><br> <div style="width:100%;">width:100%;MＭ同字口()□</div><br> <div style="width:500px;">width:500px;MＭ同字口()□</div><br> <div style="height:18px;">height:18px;MＭ同字口()□</div><br> <div style="line-height:18px;">line-height:18px;</div><br> <div style="height:20px;">height:20px;MＭ同字口()□</div><br> <div style="line-height:20px;">line-height:20px;</div><br> 高さや幅を指定するとpaddingの下<br> 指定無しならborderの下<br> 指定有りでborderの下まで表示させるにはどうすればいいのでしょうか。line-heightだと1行にしか対応できませんし、幅も指定できません。 </body> </html>

プルダウンメニューについてです。

プルダウンメニューについてです。 http://javascript.eweb-design.com/0701_pdm.html こちらのサイトを参考につくっています。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript">  </SCRIPT> </HEAD> <BODY bgcolor="#ffffff"> <A href="javaScript:pullDown()">メニューを表示する</A><BR> <DIV id="ID" style="position:absolute;visibility:hidden;"> <A href="http://www.yahoo.co.jp/">■Yahoo!</A><BR> <A href="http://bb.yahoo.co.jp/">■Yahoo! BB</A><BR> <A href="http://shopping.yahoo.co.jp/">■Yahoo! Shopping</A><BR> <A href="http://auctions.yahoo.co.jp/">■Yahoo! Auctions</A><BR> </DIV> <BR><BR><BR><BR> </BODY> </HTML> 説明がうまくできないのですが、、”メニューを表示する”をクリックしたときにドロップダウンメニューを開くと同時にページを開きたいと思っています。（”メニューを表示する”のページを作りたい。）どうしたらよいでしょうか?よろしくお願いします。

ラジオボタンの選択によって、スタイルシートを使い分けたい

皆様、ご指導宜しくお願い致します。似た様な投稿もあり、チャレンジしてみてはいるのですがどうしても思うような動きができず四苦八苦しております。やりたいのは、PHPのフォームでラジオボタンAとBの選択肢が有り、Aを選択された場合は、Bブロックを非表示にして、Bが選択された場合に、Aブロックを非表示したいんです。どんな制御文を入れればいいのかわからず。。。とんちんかんなことをしているかもしれませんが、皆様、お力をお貸し下さい。 <HTML> <HEAD> function expriMenu(pra){ if(pra=="0"){ } if(pra=="1"){ } } --> </HEAD> <BODY> <form name='pri1'> <input type='radio' name='000' value='A' onclick=\"javascript:expriMenu(0);\">A <input type='radio' name='000' value='B' onclick=\"javascript:expriMenu(1);\">>B <br> <br> <br> <br> <DIV id=priMenu style='DISPLAY: none'> ブロックＡ </DIV> <DIV id=priMenu style='DISPLAY: none'> ブロックＢ </DIV> </form> </BODY> </HTML> 宜しくお願い致します。

クリックするとボタンの中の文字が変わるようにしたいんですが一応コードは出来たんですが・・うまくうごかなくて困ってます。

java スクリプトのONCLICKについて質問があります。 ONCLICKのあとに何個もオプションはつけられないのでしょうか？ <INPUT TYPE="button" VALUE=" " ONCLICK="form1.Q8.value += '1';" style="font-size:40pt"><br> にボタンをクリックするとボタンの中に「○」を表示するようにしたいんですが、うまくいきません・・・一応こう感じにつくってみたんですが・・・ <html> <head> <title></title> </head> <body> <script type="text/javascript"> function change_label(){ document.form1.label1.value = " ○　"; } </script> <form name="form1"> <input type="hidden" name="Q8" value=""><br> <input type="button" name="label1" value="クリックしてね" onclick="form1.Q8.value += '1';change_label();"> <input type="submit" name="Q9b" value="次へ" style="font-size:25pt"> </form> </body> </html> もしよろしければアドバイスいただけませんでしょうか・・・・

メニューのツリー化でfirefoxｓでjavascriptが動作しません。

メニューのツリー化をしようと思い、以下のサンプルを使用しました。 IEでは問題なく動くのですが、Firefoxでは動作しません。恐らくネットスケープでも動作しないと思います。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>クリックするとツリーメニューを表示する（１つだけ展開し後はたたむ）</title> <script Language="JavaScript"></script> </head> <body bgcolor="white"> <a href="javaScript:exMenu('treeMenu1')">＋</a>■検索サイト１<br> <div id="treeMenu1" style="display:none"> ├<a href="">Yahoo!</a><br> ├<a href="" >Goo</a><br> └<a href="">Lycos</a><br> </div> <a href="javaScript:exMenu('treeMenu2')">＋</a>■検索サイト２<br> <div id="treeMenu2" style="display:none"> ├<a href="">Infoseek</a><br> ├<a href="" >Google</a><br> └<a href="">Kids Goo</a><br> </div> <a href="javaScript:exMenu('treeMenu3')">＋</a>■検索サイト３<br> <div id="treeMenu3" style="display:none"> ├<a href="">Excite</a><br> └<a href="" >MSN</a><br> </div> </body> </html> 1行目の<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> を消去して、<html>から書き始めれば、firefoxでも動くのですが、DOCTYPE宣言をしていても動くようにしたいと思います。どなたかアドバイスをよろしくお願いいたします。

カテゴリをクリックして、リンク先一覧を表示させたい

テーブル内のカテゴリをクリックすると、別テーブルにリンク先一覧を表示させるような、リンクページを作りたいのですが、下記のように組むと、「リンク１」をクリック→別テーブルにちゃんとリンク先一覧が表示される。次に「リンク２」をクリックすると「リンク１」のリンク先一覧の下に「リンク２」のリンク先一覧も表示されてしまう。しかも２回クリックしないと表示されません（泣「リンク２」をクリックしたら「リンク１」で表示させたリンク先一覧と入れ替えで、リンク先を表示させたいのですが、やり方が分かる方いらしたら、ご教授お願いします。 <HEAD> <SCRIPT language="JavaScript">  </SCRIPT> </HEAD> <BODY> <TABLE border="1"> <TBODY> <TR> <TD><A href="javaScript:pullDown01()">リンク１</a><BR> <BR> <A href="javaScript:pullDown02()">リンク２</a><BR> </TD> <TD style="width:380px;height:190px"> <DIV id="ID01" style="visibility: hidden;"> <A href="http://www.yahoo.co.jp/">■Yahoo!</A><BR> </DIV> <DIV id="ID02" style="visibility: hidden;"> <A href="http://bb.yahoo.co.jp/">■Yahoo! BB</A><BR> </DIV> </TD> </TR> </TBODY> </TABLE> </BODY>

innerHTMLに重なるselectボックス

小さな画面を出しているのですが、開いた画面がselectボックスに重なると、selectボックスが前面になってしまいます。これはどうにかならないでしょうか？以下サンプルスクリプト <html> <head> <title>テスト</title> </head> <body> <script language="JavaScript"> </script> <a href="#" onclick="openw('1')">子画面表示</a><br> あ<br> い<br> う<br> え<br> お<br> <a href="#" onclick="openw('1')">子画面表示</a><br> <form> <input type="text"><br> <input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><br> <select name="zz"> <option value="0">00000000000000</option> <option value="1">11111111111111</option> <option value="2">22222222222222</option> <option value="3">33333333333333</option> </select> </form> <a href="#" onclick="openw('1')">子画面表示</a><br> </body> </html>

DIVの高さをかっこよく変える方法

皆さん、教えてくださいボタンを押すとDIVの高さを、動的に大きくするjavascriptを構築していますですが初めにサイズを指定しないで、なおかつDIVを表示しないページなので、どうしても初めにDIVを一瞬でも表示しなければなりませんそれを解決させる方法はありますでしょうか皆さんのお知恵をお貸しくださいソースコード <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>高さを変えるサンプル</title> <script TYPE="text/javascript">  </script> </head> <body onload="init()"> <a href='javascript:onClick=Height();'>ここ</A> <div id="height1" style="background:red;overflow:hidden;"> 1<br> 2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br> 10<br> </div> </body> </html>

javascriptに詳しい方

下のスクリプトで見るべきページが二つ以上ある場合どのように記述すればいいのでしょうか? javascriptに詳しい方よろしくお願いいたします。 <html> <head> <script language="JavaScript">  </script> </head> <body> <A href="check.html" onClick="isClicked = true">見るべきページ</a><br> <A href="test.html" onClick="if (!isClicked){ alert('先に見るべきページをクリックしてください'); return false; }">A</a><br> </body> </html>

表示と非表示

下のような物があったときに、１を押したときに１が現れるのですが、続けて２を押したときに１と２が表示されてしまいます。この時に、２を押したら、１を非表示にして２だけを表示したいのですが、可能でしょうか？よろしくお願い致します。 <HTML><HEAD><TITLE>test</TITLE> <SCRIPT LANGUAGE="JavaScript">  </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>

３階層メニューについての質問です。

元の文字　→あ　　→Ａ　　→Ｂ　→い　　→Ｃ　　→Ｄ「元の文字」をクリックすると「あ」「い」が同時に出現。「あ」をクリックすると「Ａ」「Ｂ」が出現。となるようにしたいのですが、 <HEAD>～</HEAD>内↓ <SCRIPT language="JavaScript">  </SCRIPT> <BODY>～</BODY>内↓ <A href="javaScript:treeMenu('treeMenu1')">元の文字</A><br> <DIV id="treeMenu1" style="display:none"> <br> <A style="color :white;" href="javaScript:treeMenu('treeMenu2')"> 　　あ</A><br> <DIV id="treeMenu2" style="display:none"> 　　<A style="color : red;" href="＊＊＊(←URL省略)">Ａ</A><BR> 　　<A style="color : red;" href="＊＊＊">Ｂ</A><BR> <br> <A style="color : white;" href="javaScript:treeMenu('treeMenu3')"> 　　い</A><br> <DIV id="treeMenu3" style="display:none"> 　　<A style="color : red;" href="＊＊＊">Ｃ</A><BR> 　　<A style="color : red;" href="＊＊＊">Ｄ</A><BR> </DIV> </DIV> </DIV> とすると、「元の文字」をクリックすると「あ」が出現。「あ」をクリックすると「Ａ」「Ｂ」「い」が出現となります。上記タグを少し変更して「あ」「い」を同時に出現させる方法を教えて頂きたいです。 treeMenu○部分の変更で、出来るかと思ったのですが、上手くいきませんでした。宜しくお願い致します。

ポップアップウインド

下記のスクリプトでポップアップウインド内に『ポップアップを閉じるためのスイッチ』を設置したいのです。　－－－－－よろしくお願いします。－－－－－ <HTML> <HEAD> <TITLE>createPopup</TITLE> <SCRIPT>  </SCRIPT> </HEAD> <BODY onload="fShow()"><SPAN style="display:none" id="oSpan" onclick="fHide();"><A href="http://www.w3.org">createPopup</A><BR> <A href="http://www.google.co.jp">show</A><BR> <A href="http://www.yahoo.co.jp">hide</A><BR> <A href="http://java.sun.com">isOpen</A><BR> </SPAN><INPUT type="button" value="show" onclick="fShow()"><INPUT type="button" value="hide" onclick="fHide()"> </BODY> </HTML>

クリックすると下に説明文が出るものを作りたい。

みんなの回答

お礼 2002/11/05 16:23

関連するQ&A

クリックすると下に説明文が出るものを作りたい。

常にひとつだけ詳細表示する！の回答なのだけれど

クリックカウンター

プルダウンメニューに画像を使用するには？

JQueryでクリック時のタグの親子の関係について

z-indexを指定したボックスの下に表示させる

クリックする度に表示/非表示が切り替わるスクリプト

overflowを使ってのスクロール

IE borderの下まで背景 paddingの下まで背景

プルダウンメニューについてです。

ラジオボタンの選択によって、スタイルシートを使い分けたい

クリックするとボタンの中の文字が変わるようにしたいんですが一応コードは出来たんですが・・うまくうごかなくて困ってます。

メニューのツリー化でfirefoxｓでjavascriptが動作しません。

カテゴリをクリックして、リンク先一覧を表示させたい

innerHTMLに重なるselectボックス

DIVの高さをかっこよく変える方法

javascriptに詳しい方

表示と非表示

３階層メニューについての質問です。

ポップアップウインド

注目のQ&A

カテゴリ

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

専門家に質問してみよう