- ベストアンサー
あるタグについて質問します
タグについて質問します。。 ブログを書いているのでが あるサイトで見つけたもので タグをコピーして使えるものなのですが オンクリックと言ってクリックしたら文字や画像が 出るものです。。。 ↓このタグです <span onClick="document.all.item('moji1').style.visibility='visible'"> クリックする文字 </span> <div ID="moji1" style="visibility:hidden;"> 表示される文字 </div> 私はタグは素人なので解らないのですが このタグをブログの記事に書いてみて このタグを１つ使って書いた場合、 きちんとクリックしたら反応して文字が出てくるのですが 同じ記事内にこのタグを２つ使うとクリックしても 文字がでてこなくなって反応しません。。。 また同じ記事内では反応しないのかと思って １つの記事に１つずつ使おうと今度は 記事を二つに分けて使おうとしたら さっきまでクリックしたら反応していた一つ目の記事まで クリックに反応しなくなります。 そして２つ目の記事を削除したら また元のように１つ目の記事がクリックに反応してくれます。 もしかして、このタグになにかプラスする事によって きちんとクリックしても使えるようにならないでしょうか？ 同じ記事内でも、あるいは１つの記事に１つずつでもいいので あれば教えてもらえたら嬉しいです。。。 また、このタグでは１つ以上は無理なのでしたら 記事内に１つずつでもよいので他によいタグがあれば 教えていただけたら嬉しいです。。。 よろしくお願い致します
- chietti
- お礼率5% (8/152)
- HTML
- 回答数7
- ありがとう数0
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
ID="moji1"が重複するのが動作しなくなる原因だと思うので 二つ目以降は <span onClick="document.all.item('moji2').style.visibility='visible'"> クリックする文字</span> <div ID="moji2" style="visibility:hidden;"> 表示される文字</div> という感じ（moji○の数字を変える）にしてあげれば 何個書いても大丈夫だと思いますよ
その他の回答 (6)
- neko-ten
- ベストアンサー率55% (1287/2335)
たぶん、素人さんということで動作している内容を理解されてないのかな？ この記述自体はHTMLとJavaScriptになります。 spanでインラインを指定し、その範囲をクリックすることでJavaScriptを動作させています。 onClick="～"は、「クリックされた場合に～を実行する」という意味合いです。 そして、その～に書かれている内容ですが document.all.item('moji1').style.visibility='visible' となっています。 これは 「ドキュメント（いわゆるページ内）のすべての要素から'moji1'を探して、その要素のスタイルである"visibility"を"visible"にする」 という意味です。 今回のタグ（というかコード）を二つ書いた場合、idが「moju1」となっている要素が同じページに複数出てきてしまいます。 同じIDの要素を複数指定することはできないので、今回は動作していないのです。 また、今回はBlogということで記事とおっしゃっていますが、記事というのはブログのシステム上の切り分けの単位であるので関係ないです。 あくまでも1ページに・・・ということになります。 簡単な改善方法としては、IDをそれぞれ別にすることです。 <span onClick="document.all.item('moji1').style.visibility='visible'"> 文字1 </span> <div ID="moji1" style="visibility:hidden;"> 文字1をクリックしたときに表示する文字 </div> <span onClick="document.all.item('moji2').style.visibility='visible'"> 文字2 </span> <div ID="moji2" style="visibility:hidden;"> 文字2をクリックしたときに表示する文字 </div> ------------------------------------------------- 基本的に他の回答者様の内容とかぶってしまっていますが・・・。（汗） ただ、Blogというシステムがある上でJavaScriptを利用することはあまりお勧めできません。 場合によってはBlogの表示がkを荒れてしまうこともありますから・・・。
- SAYKA
- ベストアンサー率34% (944/2776)
No5→ classNameだとズバリで持って来れないからやっぱりIDになるんじゃないかな。 1つのクリックで複数同時にやりたかったらstyle操作を2つonClick内に書く事になるね。
- koke29
- ベストアンサー率58% (114/196)
>#4様 classではスクリプト自体動かないですよー （classでも出来るのかーと思って試したら、ダメでしたー）
何だかなあ。 idは１ページに付き（正確には一つの指定された内容に対して、ソレを参照出来るidと云う事での）１つしか対応しません。 二つ以上使いたい場合は「class」で指定。 <要素 id="内容">・・・</要素> を <要素 class="内容">・・・</要素> とする。
- SAYKA
- ベストアンサー率34% (944/2776)
>document.all これがIEのみの表記 というのはNo1が指摘してるから良いとして・・・ >document.all.item('moji1') ><div ID="moji1" style="visibility:hidden;"> これの「moji1」というのが対応っていうのは判る？ 判るようならまずidについて調べてね。 それと、数値で始まるIDは だめだから注意してね。(使える文字種にも注意)
- koke29
- ベストアンサー率58% (114/196)
補足です このスクリプトはFirefoxでは動かないみたいです （IEは動作確認出来ました）
関連するQ&A
- ブログでonClickを2つ以上並べると動かない
ブログ上のhtmlタグについて質問です。"onClick"のタグを1つ張ると動くのですが、2つ以上並べると動かなくなります。ブログはseesaaブログを使っています。 ↓動く <span onClick="document.all.item('moji2').style.visibility='visible'" onClick="document.all.item('moji2').style.visibility='hidden'"> クリックする文字 </span> <div ID="moji2" onClick="document.all.item('moji2').style.visibility='hidden'" style="visibility:hidden;"> この文字をクリックすると消えます </div> ↓動かない <span onClick="document.all.item('moji2').style.visibility='visible'" onClick="document.all.item('moji2').style.visibility='hidden'"> クリックする文字 </span> <div ID="moji2" onClick="document.all.item('moji2').style.visibility='hidden'" style="visibility:hidden;"> この文字をクリックすると消えます </div> <span onClick="document.all.item('moji2').style.visibility='visible'" onClick="document.all.item('moji2').style.visibility='hidden'"> クリックする文字 </span> <div ID="moji2" onClick="document.all.item('moji2').style.visibility='hidden'" style="visibility:hidden;"> この文字をクリックすると消えます </div> よろしくお願いします。
- ベストアンサー
- ブログ
- Mac(Safari)で無効なHTMLタグ？？
http://copicopi.com/onmousefont.html ↑こちらで紹介されていたHTMLタグの「オンマウス文字」を 会社のHPに使用したのですが、 ウインドウズ(Internet Explorer)では、 正しくマウスオンすると作動しましたが 社内のマックで同様の画面を確認したところ、 マウスオンしても作動しません。 上記のタグ説明されているHPもマック(Safari)でみると、 オンマウス文字は正しく作動しないので、 マックではこのタグ使えないのでしょうか？ マックにもウインドウズでも作動する、 オンマウス文字やオンクリック文字などの タグがあれば紹介してください。お願いいたします。 《今回使用したオンマウス文字のタグです↓》 <span onmouseover="document.all.item('moji1').style.visibility='visible'"> この文字にマウスをのせて下さい♪ </span> <div ID="moji1" style="visibility:hidden;"> 表示される文字 </div>
- 締切済み
- HTML
- <span style="visibility : hidden;">ってスタイル
<span style="visibility : hidden;"> この文字 </div> こうするとこの文字は見えなくなるのですが、これは検索ひもヒットしなくなってしまうのでしょうか？
- ベストアンサー
- ホームページ作成ソフト
- 横に並べて表示したい。
＜span onclick="expand(chip1);" style="cursor:hand;"＞ここは文字 ＜/span＞ 上記のタグを、横にふたつ並べて表示したいのですが可能でしょうか。 これは下に（オンクリックで表示される）文字が続くため、＜br＞タグを入れなければいいというものでもないですし・・・。
- 締切済み
- HTML
- リンクについて質問です。
div要素で左側がメニュー・右側がコンテンツという配置にしました。 右側のコンテンツは、背後に3つの文章をvisibility="hidden"で隠しています。 メニュー側からだと上手くリンク先に飛ぶのですが、コンテンツ側からだと全く反応しません。 ちなみにリンク先の文章を表示する場所は、右側の部分です。 メニュー側の方で一度全てリンクをクリックしてからだとなぜかコンテンツ側でもリンク先に飛ぶことが出来ます。何故でしょうか？？ function change(con) { document.all("main").style.visibility="hidden"; document.all("lesson").style.visibility="hidden"; document.all("lesson2").style.visibility="hidden"; document.all("lesson3").style.visibility="hidden"; document.all(con).style.visibility="visible"; }
- ベストアンサー
- JavaScript
- onMouseOverの適応範囲
困ってしまい質問させていただきます。 <div> <a href="t1.html" onMouseOver="javascript:document.all('id1').style.visibility='visible';" onMouseOut="javascript:document.all('id1').style.visibility='hidden';">show</a> </div> <div id="id1" onMouseOver="javascript:document.all('id1').style.visibility='visible';" onMouseOut="javascript:document.all('id1').style.visibility='hidden';"> <a href="image.gif" onMouseOver="javascript:document.writeln(document.all('id1').style.visibility)">イメージ</a> </div> 以上のhtmlでは、「イメージ」にマウスを持っていくと、hiddenと表示されてしまいます。 一度も<div id="id1"></div>から離れていないため、visibleと表示されると思っているのですが、<div></div>の中であっても、onmouseOutが実行されてしまうのでしょうか？ ブラウザはIEを利用しています。 どうか宜しくお願いします。
- ベストアンサー
- JavaScript
- ドロップダウンメニューを短縮したい
今ドロップダウンメニューを作っていて、メニューを大量に作りたい時に、下に添付してあるプログラムでは膨大になりすぎて入力がしんどいです。 ドロップダウンメニューには他にも様々なプログラム表記があると思います。ですので、メモ張にプログラムを貼ったら下と似たようなプログラムができ、なおかつこんな長ったらしいプログラムじゃなくても、こうすれば短くできる、などの知恵を持っていらっしゃる方がいらっしゃったら、是非ともご教授願えないでしょうか？。 できればプログラムで回答してもらえるとありがたいです。よろしくお願い致します。 <script language="javaScript"> function overL0(){ document.all("L0").style.backgroundColor="yellow"; document.all("S1").style.visibility="hidden";document.all("si1").style.visibility="hidden";document.all("si2").style.visibility="hidden"; } function offL0(){ document.all("L0").style.backgroundColor="#afeeee"; document.all("S1").style.visibility="hidden";document.all("si1").style.visibility="hidden";document.all("si2").style.visibility="hidden"; } function overL1(){ document.all("L1").style.backgroundColor="yellow"; document.all("S1").style.visibility="visible"; } function offL1(){ document.all("L1").style.backgroundColor="#afeeee"; document.all("S1").style.visibility="visible"; } function overS1(){ document.all("S1").style.backgroundColor="yellow"; document.all("S1").style.visibility="visible";document.all("si1").style.visibility="visible";document.all("si2").style.visibility="visible"; } function offS1(){ document.all("S1").style.backgroundColor="#afeeee"; document.all("S1").style.visibility="visible";document.all("si1").style.visibility="visible";document.all("si2").style.visibility="visible"; } function oversi1(){ document.all("si1").style.backgroundColor="yellow"; document.all("si1").style.visibility="visible"; } function offsi1(){ document.all("S1").style.backgroundColor="#afeeee"; document.all("si1").style.visibility="visible"; } function oversi2(){ document.all("si2").style.backgroundColor="yellow"; document.all("si2").style.visibility="visible"; } function offsi2(){ document.all("si2").style.backgroundColor="#afeeee"; document.all("si2").style.visibility="visible"; } </script> <body> <div id="L0" style="position:relative;background-color:#afeeee; width:1500;height:30" onMouseOver="overL0()" onMouseOut="offL0()"> </div> <div id="L1" style="position:relative;background-color:#afeeee; width:150;height:30" onMouseOver="overL1()" onMouseOut="offL1()"> name1 </div> <div id="S1" style="position:absolute;top:45;left:160;background-color:#afeeee; width:150;height:30;visibility:hidden;" onMouseOver="overS1()" onMouseOut="offS1()"> name2 </div> <div id="si1" style="position:absolute;top:45;left:310;background-color:#afeeee; width:150;height:30;visibility:hidden;" onMouseOver="oversi1()" onMouseOut="offsi1()"> <a href="http://www.google.co.jp/" target="blank" target="c">A</a><br> </div> <div id="si2" style="position:absolute;top:75;left:310;background-color:#afeeee; width:150;height:30;visibility:hidden;" onMouseOver="oversi2()" onMouseOut="offsi2()"> <a href="http://www.google.co.jp/" target="blank" target="c">B</a><br> </div> </body>
- ベストアンサー
- その他(ソフトウェア)
- このプログラムを改善してくれませんか？。
今ドロップダウンメニューを作っていて、メニューを大量に作りたい時に、下に添付してあるプログラムでは膨大になりすぎて入力がしんどいです。 ドロップダウンメニューには他にも様々なプログラム表記があると思います。ですので、メモ張にプログラムを貼ったら下と似たようなプログラムができ、なおかつこんな長ったらしいプログラムじゃなくても、こうすれば短くできる、などの知恵を持っていらっしゃる方がいらっしゃったら、是非ともご教授願えないでしょうか？。 できればプログラムで回答してもらえるとありがたいです。よろしくお願い致します。 <script language="javaScript"> function overL0(){ document.all("L0").style.backgroundColor="yellow"; document.all("S1").style.visibility="hidden";document.all("si1").style.visibility="hidden";document.all("si2").style.visibility="hidden"; } function offL0(){ document.all("L0").style.backgroundColor="#afeeee"; document.all("S1").style.visibility="hidden";document.all("si1").style.visibility="hidden";document.all("si2").style.visibility="hidden"; } function overL1(){ document.all("L1").style.backgroundColor="yellow"; document.all("S1").style.visibility="visible"; } function offL1(){ document.all("L1").style.backgroundColor="#afeeee"; document.all("S1").style.visibility="visible"; } function overS1(){ document.all("S1").style.backgroundColor="yellow"; document.all("S1").style.visibility="visible";document.all("si1").style.visibility="visible";document.all("si2").style.visibility="visible"; } function offS1(){ document.all("S1").style.backgroundColor="#afeeee"; document.all("S1").style.visibility="visible";document.all("si1").style.visibility="visible";document.all("si2").style.visibility="visible"; } function oversi1(){ document.all("si1").style.backgroundColor="yellow"; document.all("si1").style.visibility="visible"; } function offsi1(){ document.all("S1").style.backgroundColor="#afeeee"; document.all("si1").style.visibility="visible"; } function oversi2(){ document.all("si2").style.backgroundColor="yellow"; document.all("si2").style.visibility="visible"; } function offsi2(){ document.all("si2").style.backgroundColor="#afeeee"; document.all("si2").style.visibility="visible"; } </script> <body> <div id="L0" style="position:relative;background-color:#afeeee; width:1500;height:30" onMouseOver="overL0()" onMouseOut="offL0()"> </div> <div id="L1" style="position:relative;background-color:#afeeee; width:150;height:30" onMouseOver="overL1()" onMouseOut="offL1()"> name1 </div> <div id="S1" style="position:absolute;top:45;left:160;background-color:#afeeee; width:150;height:30;visibility:hidden;" onMouseOver="overS1()" onMouseOut="offS1()"> name2 </div> <div id="si1" style="position:absolute;top:45;left:310;background-color:#afeeee; width:150;height:30;visibility:hidden;" onMouseOver="oversi1()" onMouseOut="offsi1()"> <a href="http://www.google.co.jp/" target="blank" target="c">A</a><br> </div> <div id="si2" style="position:absolute;top:75;left:310;background-color:#afeeee; width:150;height:30;visibility:hidden;" onMouseOver="oversi2()" onMouseOut="offsi2()"> <a href="http://www.google.co.jp/" target="blank" target="c">B</a><br> </div> </body>
- ベストアンサー
- その他(ソフトウェア)
- リンク押下でタグを書き換えたい
リンクが複数あって、押したリンク文字だけ<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
- リンクレイヤー表示の切り替えについて
もともとは1つのリンクメニューの表示と非表示を切り替える書籍のサンプルを2つのリンクメニューを同じ場所に切り替え表示させるよう修正を行ってみました。 ですが、リンク(1)を表示させてからリンク(2)をさせるにはリンク(1)を再度クリックし、一度非表示にしないとリンク(2)が表示されません。 リンク(1)の表示から直接リンク(2)の表示に切り替えるようにしたいのですがどなたかご教授願えませんでしょうか。 <html> <head> <SCRIPT Language="JavaScript"> <!-- types = "hidden"; function pullDownMenu(tagName,x,y) { if (types == 'hidden') types = 'visible'; else types = 'hidden'; if (document.layers) document.layers[tagName].visibility = types; if (document.all) document.all(tagName).style.visibility = types; } // --> </SCRIPT> </head> <body> <DIV STYLE="position: absolute; left: 168; top: 15; visibility: hidden; width: 182; height: 56" ID="tag1"> <TT> <A HREF="http://a.co.jp">サイトA</A><BR> <A HREF="http://b.co.jp">サイトB</A> </TT> </DIV> <DIV STYLE="position: absolute; left: 168; top: 15; visibility: hidden; width: 182; height: 56" ID="tag2"> <TT> <A HREF="http://c.co.jp">サイトC</A><BR> <A HREF="http://d.co.jp">サイトD</A> </TT> </DIV> <table> <tr> <td> <A HREF="sample.htm" onClick="pullDownMenu('tag1');return false">リンク(1)</A> <A HREF="sample.htm" onClick="pullDownMenu('tag2');return false">リンク(2)</A> </td> </tr> </table> </body> </html>
- ベストアンサー
- JavaScript
