リンクについての質問

前へ 次へ
このQ&Aのポイント
  • div要素によるメニューとコンテンツの配置でリンク先にアクセスできない問題について
  • コンテンツ側からリンク先に飛べない原因と解決方法について
  • メニュー側からリンクをクリックした後にコンテンツ側でもリンク先にアクセスできる理由について
回答を見る
  • ベストアンサー

リンクについて質問です。

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"; }

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

visibility="hidden" を display="none" に、 visibility="visible" を display="block" に、 とそれぞれ変更してはいかがでしょうか。 （検証はしていませんが・・・） visibility は単に見えるか見えないかで、 そのもの自体はその場所を保持しているし・・・。 あとは他のＣＳＳの指定が関係しているのでは？ 提示の機能だけでは単にコンテンツのどれが見えているかいないかだけで切り替えというより列記だし、 どこかに位置指定もあるのだろうし、 重なっているのなら優先順位も関係するだろうし・・・。 なにより初期表示が問題というのにその指定状況の提示がないし・・・。 という事で、現状では明確な原因の回答は情報不足の為に困難です。 原因解明も必要の場合は改めてその辺の指定内容もご提示下さい。

mabomo
質問者

お礼

ありがとうございまず。 昨日からずっと悩んでいたのですが、先ほど解決しました。原因は、初歩のミスです。 レイアウトの順位指定を逆に指定していました。 順番を変えたらあっさり治りました。 回答ありがとうございます。

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

関連するQ&A

  • Flashで作成したボタンをJavascriptに使用したい

    JavaScriptで下記のような記述をしました。 function btnCli(con) { document.all("main").style.visibility="hidden"; document.all("company").style.visibility="hidden"; document.all(con).style.visibility="visible"; } Flashで作成したボタンには <a href = "javascript:btnCli('company')";> <Flashのボタン>←ここに記述してる </a> としているのですが、関数の引数にcompanyが渡らないらしく画面が表示されません。 表示させたい画面には <div id = "company" style ="visibility:hidden; z-index:16;"> ～ と記述しております。 本文・背後の文と何枚か文を重ねていてメニューのボタンをクリックすると入れ替わるようにしたいのですが できますでしょうか？ ちなみにFlashで作成したボタンではなく、ただの文字や普通の画像であれば出来ました。

  • マウスオンで説明文をページの真ん中に表示させたい！

    よろしくお願いします。 http://www4.ocn.ne.jp/~tomotan/tagpractice.html （↑）このサイトで <HTML> <HEAD> <SCRIPT><!-- function show(object) { if (document.layers && document.layers[object] != null) document.layers[object].visibility = 'visible'; else if (document.all) document.all[object].style.visibility = 'visible'; } function hide(object) { if (document.layers && document.layers[object] != null) document.layers[object].visibility = 'hidden'; else if (document.all) document.all[object].style.visibility = 'hidden'; } //--></SCRIPT> <STYLE><!-- .myStyle { position: absolute; visibility:hidden; top:150; left:300; } //--></STYLE> </HEAD> <BODY> <A HREF="#" onMouseover="show('myLayer1')" onMouseout="hide('myLayer1')">ここにマウス</A> <DIV ID="myLayer1" CLASS="myStyle"> Hello!! </DIV> </BODY> </HTML> を表示させると、「Hello!」の文字が「テキスト」の右側に表示されます。 そうじゃなくて、「Hello!」の右側にリンクを箇条書きに書き込んでいきたいんです。 で、リンクにマウスを乗せると左側にリンク先の説明が表示される・・・というふうにしたいんです。 お願いしますｍ（＿＿）ｍ

  • ブログで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> よろしくお願いします。

  • ドロップダウンメニューを短縮したい

    今ドロップダウンメニューを作っていて、メニューを大量に作りたい時に、下に添付してあるプログラムでは膨大になりすぎて入力がしんどいです。 ドロップダウンメニューには他にも様々なプログラム表記があると思います。ですので、メモ張にプログラムを貼ったら下と似たようなプログラムができ、なおかつこんな長ったらしいプログラムじゃなくても、こうすれば短くできる、などの知恵を持っていらっしゃる方がいらっしゃったら、是非ともご教授願えないでしょうか？。 できればプログラムで回答してもらえるとありがたいです。よろしくお願い致します。 <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>

  • リンクレイヤー表示の切り替えについて

    　もともとは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>

  • 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で，リンク文字にマウスを乗せたときに， 空いているスペースに画像をフェードイン・フェードアウト して表示したいと考えています。 リンクが一つの場合はできたのですが， これが複数のリンクが合ったときには， どのようにすればよろしいでのしょうか？ <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <link href="test.css" rel="stylesheet" type="text/css"> <title>What's New!</title> </head> <body> <script language="JavaScript"><!-- <!-- function fadein(id) { app = navigator.appName.charAt(0); ver = navigator.appVersion.charAt(0); if ((app == "M") && (ver >= 4)) { document.all.item(id).style.visibility = "hidden"; document.all.item(id).filters[0].apply(); document.all.item(id).style.visibility = "visible"; document.all.item(id).filters[0].play(); } // --> } // --></script> <IMG SRC="AAA.jpg" ID="myIMG" STYLE="filter:revealTrans(duration=3.0,Transition=12);visibility=hidden;" width="420" height="240" style="position:absolute; top:100px; left:350px;"> <div class="menu">■<a href="####" onMouseOver="fadein('myIMG')">フェード１</a></div> </body> </html>

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

    テーブル内のカテゴリをクリックすると、別テーブルにリンク先一覧を表示させるような、リンクページを作りたいのですが、下記のように組むと、 「リンク１」をクリック→別テーブルにちゃんとリンク先一覧が表示される。 次に「リンク２」をクリックすると「リンク１」のリンク先一覧の下に「リンク２」のリンク先一覧も表示されてしまう。 しかも２回クリックしないと表示されません（泣 「リンク２」をクリックしたら「リンク１」で表示させたリンク先一覧と入れ替えで、リンク先を表示させたいのですが、やり方が分かる方いらしたら、ご教授お願いします。 <HEAD> <SCRIPT language="JavaScript"> <!-- // プルダウンメニュー flag = false; function pullDown01() { if(flag) ID01.style.visibility = "hidden"; else ID01.style.visibility = "visible"; flag = !flag; } function pullDown02() { if(flag) ID02.style.visibility = "hidden"; else ID02.style.visibility = "visible"; flag = !flag; } //--> </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>

  • これは何をするスクリプトですか？

    <head> <script type="text/javascript"> <!-- function loading() { if (document.getElementById){ document.getElementById('load').style.visibility = 'hidden'; } else { if (document.layers){ document.layers['load'].visibility = 'hidden'; } else { document.all('load').style.visibility = 'hidden'; }}} // --> </script> </head> <body onload="loading()"> 詳細は略して書いています。 プログラムに全く詳しくないので、何をやろうとしているスクリプトなのかわかりません。 皆様には簡単かとは思いますが、よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する