• 締切済み

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

ホームページで辞典を作ろうと思っています。 クリックすると、その単語の説明が下に表示されて、再度クリックすると、表示が閉じるタイプのものが作りたいのですが、現在私が作っているものではエラーが出ます。 <HTML> <HEAD> <TITLE>単語辞典</TITLE> <SCRIPT language="JavaScript"></SCRIPT> <STYLE type="text/css"> <!-- .sld{ border:1 solid #000; padding:3; background-color:"F0F0F0F0 ;} --> </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の部分で「オブジェクトを指定してください」と出てきます。 どなたかお願いします。

みんなの回答

  • nuki
  • ベストアンサー率30% (6/20)
回答No.3

既に回答されている方々も結論についてはご指摘の通り、「オブジェクトを指定してください」というエラーは、<A onClick=" sld('01')">のonclickイベントハンドラで指定しているJavaScript関数sldが定義されていないことから発生しています。 CSSとJavaScriptを混同されているのではと、想像できました。 恐らく、お望みの動作に近づけるためには、 <A onClick=" sld('01')">■単語<BR> </A> <DIV style="DISPLAY:none; class=sld id=01">単語の説明文</DIV> の代わりに、 <A onClick="id01.style.display = ''">■単語<BR> </A> <DIV style="display: none;" class="sld" id="id01">単語の説明文</DIV> とすれば良いでしょう。 これで、非表示→表示への切り換えが実現できます。

回答No.2

こんな風に？ http://www.hajimeteno.ne.jp/dhtml/dist/js14.html javaスクリプト本体は公開したくないのかな？ それが肝心なところなんだけど、、、、

参考URL：
http://www.hajimeteno.ne.jp/dhtml/dist/js14.html
  • so_blue
  • ベストアンサー率48% (50/104)
回答No.1

<SCRIPT language="JavaScript"></SCRIPT> ↑JSは何も書かれていないのでしょうか？

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

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

    ホームページで辞典を作ろうと思っています。 クリックすると、その単語の説明が下に表示されて、再度クリックすると、表示が閉じるタイプのものが作りたいのですが、現在私が作っているものではエラーが出ます。 <HTML> <HEAD> <TITLE>単語辞典</TITLE> <SCRIPT language="JavaScript"></SCRIPT> <STYLE type="text/css"> <!-- .sld{ border:1 solid #000; padding:3; background-color:"F0F0F0F0 ;} --> </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"> <!-- var cnt = 0; var flg = true; function f_click(){ if(flg){ cnt++; document.getElementById('Ninzu').innerHTML=cnt; flg = false; } } //--> </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> <!-- div.inside { padding-left:1em; display:none; } --> </style> <script type="text/javascript"> <!-- function changeFold(f){ if(f.value == "＋"){ f.value="－"; f.parentNode.childNodes.item(2).style.display="block"; } else { f.value="＋"; f.parentNode.childNodes.item(2).style.display="none"; } } //--> </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"> <!-- function MM_showHideLayers() { //v9.0 var i,p,v,obj,args=MM_showHideLayers.arguments; for (i=0; i<(args.length-2); i+=3) with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2]; if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; } obj.visibility=v; } } //--> </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>を表示させたいのですが、後ろに回って表示されません。 これを表示させる方法をご存じでしたら教えてください。

    • ベストアンサー
    • HTML
  • クリックする度に表示/非表示が切り替わるスクリプト

    クリックする度に表示/非表示が切り替わるスクリプト 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>

    • ベストアンサー
    • CSS
  • 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"> <!-- // プルダウンメニュー flag = false; function pullDown() { if(flag) ID.style.visibility = "hidden"; else ID.style.visibility = "visible"; flag = !flag; } //--> </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> 説明がうまくできないのですが、、”メニューを表示する”をクリックしたときにドロップダウンメニューを開くと同時にページを開きたいと思っています。（”メニューを表示する”のページを作りたい。） どうしたらよいでしょうか?よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する