オンマウスで表示されるサブメニューについて

2023/08/08 09:22

このQ&Aのポイント

メインメニューにオンマウスすると、サブメニューが表示されるようにしたい
サブメニューを表示した状態で他のページに移動後、ブラウザのバックを使用しても戻ってきたとき、移動前に表示していたサブメニューが開いたままになってしまう
解決策を教えてください。

ベストアンサー

オンマウスで表示されるサブメニューについて

2008/12/28 11:06

よろしくお願い致します。メインメニューにオンマウスすると、サブメニューが表示されるようにしたく、下記のようなコードを使用しています。 FirefoxやsSafariで起きる問題なのですが、サブメニューを表示した状態で他のページに移動後、ブラウザのバックを使用しても戻ってきたとき、移動前に表示していたサブメニューが開いたままになっており、その後ずっと開いたままで非表示にならないことがあります。色々試してみたのですが、うまく行かず困っています。どうか解決策をお教え下さいますようお願い致します。 <html> <head> <script type="text/javascript">  </script> </head> <body> <a href="#" onMouseOver="showHide('subnavi');return false;">メインメニュー</a> <div id="subnavi" style="display:none;"> <a href="http://www.yahoo.co.jp/">サブメニュー</a> </div> </body> </html>

patsaysnow
お礼率77% (89/115)

JavaScript
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

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

ベストアンサー

zxcv0000
ベストアンサー率56% (111/196)

2008/12/28 17:05 回答No.1

BODYタグを <body onunload="document.getElementById('subnavi').style.display = 'none';"> にすればどうでしょうか。ブラウザの進む/戻るを駆使したページ移動にも耐えられるかはよく判りません、すみません。

質問者

お礼 2008/12/28 17:26

早速ご回答頂きありがとうございました。お教え頂いた通りにしてみたら、無事ブラウザのバックにも対応できました。こんな年の瀬にご回答頂き、本当にありがとうございました。良い新年をお迎え下さい。

関連するQ&A

リンク押下でタグを書き換えたい
リンクが複数あって、押したリンク文字だけ<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
展開メニューの修正
展開メニューの修正をしています。 menu.js------------------------ function block(id){ if(document.getElementById){ if(document.getElementById(id).style.display == "none"){ document.getElementById(id).style.display = "block"; }else if(document.getElementById(id).style.display == "block"){ document.getElementById(id).style.display = "none"; } } } html--------------------------- <div onMouseOut="block('block1')"> <div onMouseOver="block('block1')"><a href="***">コンテンツ名</a></div> <div id="block1" style="display: none;"> <ul> <li><a href="***">サブコンテンツ</a></li> <li><a href="***">サブコンテンツ</a></li> <li><a href="***">サブコンテンツ</a></li> <li><a href="****">サブコンテンツ</a></li> </ul></div></div> 「コンテンツ名」に触った時展開して、サブコンテンツor「コンテンツ名」から離れた時にサブコンテンツを閉じる、という挙動まではできているのですが、サブコンテンツのメニュー間を移動する際にちらつくというかいちいち閉じてしまうのを直したいのですが、どうしたらいいのでしょうか？よろしく御教授ください。
- ベストアンサー
- JavaScript
折たたみメニューの表示・非表示
JavaScriptで下記のような折りたたみ（階層）メニューを作成しています。 <script type="text/javascript">  </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"></script> を挿入すればいけそうでやってみたのですが、今度は開きっぱなしになってしまいます。二日ほど調べたのですが、よい解決策が見つかりません（また、<div>の中のソースはすでにphpのコードを組込んでいるので、できれば中の部分はいじりたくありません）。お詳しい方、大変恐れ入りますが、どうぞご教示くださいませ。よろしくお願いいたします。
- ベストアンサー
- JavaScript
表示・非表示の度に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
クリックで表示/非表示の切り替え
私は今現在HPを作成しているのですが、その中の特定のページでテキストをクリックしたら表示/非表示の切り替えをしたいと考えてます。表示/非表示自体は検索して出てきたオープンソースを拝借したら出来ました。ソースは下記のように記述してます。しかし、既存の状態だと『テキスト1』をクリックして表示させたらもう一度『テキスト1』をクリックしない限り非表示にはなりません。『テキスト1』をクリックして表示している状態で『テキスト2』をクリックしたら自動的に『テキスト1』の表示されてる部分を非表示しにしたいのですが。 <head> <SCRIPT type="text/JavaScript">  </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
クリックで特定の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
砂時計について教えてください。
下のように記述すると、NN、Firefoxの最新版では特に何もないのですが、IEの最新版ではマウスカーソルを動かすたびに砂時計がチカチカと出る理由を教えてください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <script type="text/JavaScript">  </script> <table cellspacing="0" cellpadding="0"> <tr> <td valign="top"> <div id="menu0" style="display:none;"> <div onmouseover="over2(1)"><a href="url01.html">link01</a></div> </div> </td> <td valign="top"> <div id="menu1" style="display:none;" onmouseover="over2(1)" onmouseout="out(1)"> <div><a href="url11.html">link11</a></div> </div> <div id="menu2" style="display:none;" onmouseover="over2(2)" onmouseout="out(2)"> <div><a href="url21.html">link21</a></div> </div> <div id="menu3" style="display:none;" onmouseover="over2(3)" onmouseout="out(3)"> <div><a href="url31.html">link31</a></div> </div> </td> </tr> </table>
- ベストアンサー
- JavaScript
アドバイスお願いします
今　ビルダー１１で　１．メインメニューをワンクリックでサブメニューが表示／非表示に切り替り２．メインメニューをクリックすると他のサブメニューが自動的に閉じるこの機能を製作していますが、なかなか上手く出来ませんアドバイスお願いします JavaScriptソースは、まったくのシロートでがお願いします <script language="JavaScript">  </script> <style type="text/css">  </style> HTMLソース <div>Menu_Ａ</div> <ul> <li>sub_1 <li>sub_2 <li>sub_3 </ul> <div>Menu_Ｂ</div> <ul> <li>sub_1 <li>sub_2 <li>sub_3 </ul> <div>Menu_Ｃ</div> <ul> <li>sub_1 <li>sub_2 <li>sub_3 </ul>
- 締切済み
- JavaScript
表示中のタブに色を付けたい
タブ1111～5555は青色表示されていますが選択中には常に赤色表示させておきたいのですがどうすれば良いのでしょうか。ご教授ください <html> <head> <script type="text/javascript"> function ChangeTab(tabname) { // 全部消す document.getElementById('tab1').style.display = 'none'; document.getElementById('tab2').style.display = 'none'; document.getElementById('tab3').style.display = 'none'; document.getElementById('tab4').style.display = 'none'; document.getElementById('tab5').style.display = 'none'; // 指定箇所のみ表示 document.getElementById(tabname).style.display = 'block'; } // --></script> </head> <body> <a href="#tab1" class="tab1" onclick="ChangeTab('tab1'); return false;">1111</a> <a href="#tab2" class="tab2" onclick="ChangeTab('tab2'); return false;">2222</a> <a href="#tab3" class="tab3" onclick="ChangeTab('tab3'); return false;">3333</a> <a href="#tab4" class="tab4" onclick="ChangeTab('tab4'); return false;">4444</a> <a href="#tab5" class="tab5" onclick="ChangeTab('tab5'); return false;">5555</a> <div id="tab1" class="tab"> <div class="information-newwarp">aaaa</div> </div> <div id="tab2" class="tab"> <div class="information-newwarp">bbbb</div> </div> <div id="tab3" class="tab"> <div class="information-newwarp">cccc</div> </div> <div id="tab4" class="tab"> <div class="information-newwarp">dddd</div> </div> <div id="tab5" class="tab"> <div class="information-newwarp">eeee</div> </div> <script type="text/javascript"></script> </body> </html>
- ベストアンサー
- JavaScript
ツリーメニューについて
フレームページで、JavaScriptで文字(下の場合は「親メニュー」)クリックすると開閉するツリーメニューを使用したいと思っています(フレームあり・なしは訪問者の自由で選べるようにしています)。 http://himajin.moo.jp/menu/menu.html ここや、 http://www.openspc2.org/reibun/javascript/#8　こちらの05・06・63などを参考にして、自分なりにシンプルに変更してみたのですが、記述に問題点などはありますでしょうか？以下が、そのソースです(簡略化しています)。 <html> <head> <script type="text/JavaScript">  </script> </head> <body> <a href="JavaScript:treeMenu('treeMenu1')">親メニュー</a> <div id="treeMenu1" style="display:none"> 　<li><a href="a.html" target="main">子メニュー</a></li> 　<li><a href="b.html" target="main">子メニュー</a></li> </body> </html> また、「document.all」はIE専用だと聞いたので「document.getElementById」に変更してみたのですが、これでほかのブラウザでも問題は無く使用できますか？ JavaScriptは初めてなのであまり自信がありません。 IEとFirefoxでは動作確認済みです。よろしくお願いします。
- ベストアンサー
- JavaScript