- 締切済み
IE6,7で折りたたみメニューの状態を記憶
現在、下記のソースで折りたたみメニューを作っています。 var trList = new Array("treeMenu1","treeMenu2","treeMenu3","treeMenu4","treeMenu5","treeMenu6"); // ツリーメニューのリスト function exMenu(tName) { for (i=0; i<trList.length; i++) document.getElementById(trList[i]).style.display = "none"; var tMenu=(document.all)?document.all(tName).style:document.getElementById(tName).style; (tMenu.display=='none')?tMenu.display="block":tMenu.display="none"; } このメニューで開いたリンク先に飛んで、ブラウザの戻るボタンで戻ったとき、開いていたメニューが開いたままになるようにしたいのですが、FireFox,Safariではうまくいくのですが、IE6,7では閉じてしまいます。 なんとかならないでしょうか？
- demryu
- お礼率100% (2/2)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- yambejp
- ベストアンサー率51% (3827/7415)
ページの変遷とキャッシュの問題なので、ブラウザの解釈次第だし 難しいとおもいます。 場合によってクッキーと絡める方法もないことはないでしょうけど かなり面倒になりそうなのでお勧めできません。
関連するQ&A
- displayの状態を取得したい
下記で表示の切替えをしていますが、クリックした後の時点で「★」が見えているかどうかを取得する方法を教えて下さい。下記の中にヒント・回答があるのかもしれませんが、素人のため、わからず・・。 <SCRIPT language=JavaScript> function exMenu(tName) { tMenu = document.all[tName].style; if (tMenu.display == 'none') tMenu.display = "block"; else tMenu.display = "none"; } // --></script> <a href="javaScript:exMenu('treeMenu')">＋</a>表示切替 <div id="treeMenu" style="display:none"> ★ </div>
- ベストアンサー
- 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"> <!-- function treeMenu(tName) { tMenu = document.getElementById(tName).style; if(tMenu.display == 'none') tMenu.display = "block"; else tMenu.display = "none"; } //--> </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
- JavaScriptで折りたたみメニュー
現在、JavaScriptを利用して折りたたみメニューを作成しました。 2つの項目の下にそれぞれ下層メニューがあり、各項目をクリックするごとに下層メニューが開いたり閉じたりできる状態なのですが、 このどちらかの項目をクリックしたとき、その項目の下層メニューは表示されるが、もう一方の項目の下層メニューは閉じる。というようにするにはどうすればよいでしょうか？（両方の下層メニューが同時に開いている状態が無いように。） よろしくお願いいたします。 【XHTML】 <ul> <li><a href="javascript:exMenu('treeMenu1')">項目1</a> <ul id="treeMenu1" style="display:none"> <li><a href="#">項目1-1</a></li> <li><a href="#">項目1-2</a></li> <li><a href="#">項目1-3</a></li> </ul> </li> <li><a href="javascript:exMenu('treeMenu2')">項目2</a> <ul id="treeMenu2" style="display:none"> <li><a href="#">項目2-1</a></li> <li><a href="#">項目2-2</a></li> <li><a href="#">項目2-3</a></li> </ul> </li> </ul> 【JavaScript】 function exMenu(tName) { tMenu = document.getElementById(tName).style; if (tMenu.display == 'none') tMenu.display = "block"; else tMenu.display = "none"; }
- ベストアンサー
- JavaScript
- JavaScriptについて
現在、ホームページにてJavascriptのツリーメニューをつくっています。 ここでメニューA・B・Cがあるとします。 メニューAが開いているときにメニューBを押したらメニューAを閉じるようにしたいのです、どうすればいいか分かりません。 現在の状態はこれです。 <SCRIPT language="JavaScript"> <!-- // ツリーメニュー flag = false; function treeMenu(tName) { tMenu = document.all[tName].style; if(tMenu.display == 'none') tMenu.display = "block"; else tMenu.display = "none"; } //--> </SCRIPT>
- 締切済み
- JavaScript
- ツリーメニューを２個つづけると
<script type="text/JavaScript"> <!-- function treeMenu(tName){ tMenu = document.getElementById(tName).style; tMenu.display=(tMenu.display=='none')?"block":"none"; } //--> </script> </head> <body> <img src="icon.gif"> <font color="FF6600"><a href="JavaScript:treeMenu('treeMenu1')">GENSUI</a> <ul id="treeMenu1" style="display:none;margin-top:0px;"> <a href="a.html" target="right">１</a><br> <a href="b.html" target="right">２</a></ul> ここまでで１つめ。下から２つめ <script type="text/JavaScript"> <!-- function treeMenu(tName){ tMenu = document.getElementById(tName).style; tMenu.display=(tMenu.display=='none')?"block":"none"; } //--> </script> </head> <body> <img src="newicon.gif"> <font color="FF6600"><a href="JavaScript:treeMenu('treeMenu1')">ABYSS</a> <ul id="treeMenu1" style="display:none;margin-top:0px;"> <a href="a.html" target="right">３</a><br> <a href="b.html" target="right">４</a></ul> こうすると、２つめの【ABYSS】をクリックすると上の【GENSUI】のツリー『１』『２』がでてきます。（GENSUIを押したときと同じ状態になる） どうすればちゃんと【ABYSS】をクリックして『３』『４』がでてくれますか？
- ベストアンサー
- その他（インターネット・Webサービス）
- JavaScriptを利用しツリーメニューを作成していますが、
JavaScriptを利用しツリーメニューを作成していますが、 ページを飛んで戻ってくるとメニューが閉じてしまいます。 更新を押した場合も同じです。 それを開いた状態に保っておきたいのです。 ちなみにソースは、 <HEAD> <SCRIPT language="JavaScript"> <!-- // ツリーメニュー flag = false; function treeMenu(tName) { tMenu = document.all[tName].style; if(tMenu.display == 'none') tMenu.display = "block"; else tMenu.display = "none"; } //--> </SCRIPT> <HEAD> と最初に書いておいて、 ツリーメニューを表示させたいところに、 <A href="javaScript:treeMenu('treeMenu1')">○○○</a><br> <DIV id="treeMenu1" style="display:none"> ┣<A href="aaa.html">aaa</A><BR> ┣<A href="bbb.html">bbb</A><BR> ┗<A href="ccc.html">ccc</A><BR> </DIV> と書いてます。 どこをどのように変えればよいですか？ よろしくお願いします。 また参考にさせて頂いたサイトも一緒に載せておきます。 http://javascript.eweb-design.com/0703_tm.html
- ベストアンサー
- JavaScript
- メニューのツリー化で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"><!-- trList = ["treeMenu1","treeMenu2","treeMenu3"]; // ツリーメニューのリスト function exMenu(tName) { for (i=0; i<trList.length; i++) eval(trList[i]).style.display = "none"; tMenu = eval(tName).style; if (tMenu.display == 'none') tMenu.display = "block"; else tMenu.display = "none"; } // --></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宣言をしていても動くようにしたいと思います。 どなたかアドバイスをよろしくお願いいたします。
- 締切済み
- JavaScript
- 折りたたみメニューについて
<head> <script type="text/javascript"> <!-- function exMenu_close(tName) { tMenu = document.all[tName].style; if (tMenu.display == 'block') tMenu.display = "none"; } function exMenu(tName) { tMenu = document.all[tName].style; if (tMenu.display == 'none') {tMenu.display = "block";} else {tMenu.display = "none";} } // --> </script> <style type="text/css"> <!-- ul{margin:0px;width:164px; list-style-type:none;} li,li a:link{height:20px; width:164px;background-color:yellow;} #menu a:link{background-image:url(img.gif);} #menu a:hover,#menu a:active{ background-image:url(img2.gif);} ---> </style> </head> <body onload="exMenu_close('treeMenu');"> <ul> <li id="menu"><a href="javaScript:exMenu('treeMenu')">LINK</a></li> </ul> <div id="treeMenu" style="display:block"> <ul> <li><a href="./page1.html" target="right">MENU1</a></li> <li><a href="./page2.html" target="right">MENU2</a></li> </ul> </div> 左がメニューで、右がメインページの左右にわけたフレームページを作成予定です。メニューには折りたたみメニューを使いたいと考えています。 http://www.flying-h.co.jp/faq/index.html ↑は折りたたみメニューではありませんが、イメージとしては同じような感じです。メニューをクリックすると、クリックしたメニューの色が変更され、維持します。そしてその下に新たなメニューが表示されます。 説明下手ですみません、わかりにくい場合はHotmailのメニューをご覧いただくと分かりやすいかも知れません、クリックするとメニューの色が変わったままの状態を維持します。 上記折りたたみメニューでは、hoverとactiveにimg2.gifを設定していますが、これではリンクとは異なる別の箇所をクリックすると元のimg.gifに戻ってしまいます。 開かれたメニューの背景画像を常にimg2.gifにしたいのですが、方法がわかりません。 JavaScriptは自分で作るだけの知識がほとんどないため、配布されているものを探し回っていますが、見つかりませんでした。このようなメニューをご存知の方、参考サイト、又は、上記スクリプトをどのように改造すればいいのかお教えいただけないでしょうか。 ちなみに、Hotmailのソースをみてみましたが、複雑すぎて自分の知識では解析不可能でした。 お手数をおかけいたしますが、よろしくお願いいたします。
- ベストアンサー
- JavaScript
- ▲▲JavaScriptのツリーメニューについて▲▲
現在このような記述でツリーメニューを作っています trList = ["treeMenu1","treeMenu2","treeMenu3","treeMenu4","treeMenu5","treeMenu6","treeMenu7","treeMenu8"]; function exMenu(tName) { for (i=0; i<trList.length; i++) eval(trList[i]).style.display = "none"; tMenu = eval(tName).style; if (tMenu.display == 'none') tMenu.display = "block"; else tMenu.display = "none"; } 本文は <img src="sozai/menu1.gif" alt="矢印" width="13" height="13"> <a href="javascript:exMenu('treeMenu1')">教会のご案内</a> <div id="treeMenu1" style="display:none" class="font_menu2"> <img src="sozai/menu2.gif" alt="矢印" width="9" height="9"> <a href="kyoukai_1_1.html" target="main">牧師・スタッフの紹介</a><br> <img src="sozai/menu2.gif" alt="矢印" width="9" height="9"> <a href="kyoukai_2_1.html" target="main">教会施設の紹介</a><br> <img src="sozai/menu2.gif" alt="矢印" width="9" height="9"> <a href="kyoukai_3_1.html" target="main">交通のご案内</a><br> <img src="sozai/menu2.gif" alt="矢印" width="9" height="9"> <a href="kyoukai_4_1.html" target="main">教会QandA</a> </div> こんな感じです☆多少こちらで決めたタグなども入っていますが…。 テーブルを使って記述しています。 上記を見まして、「教会のご案内」をクリックするとメニューが出てきます。もう一度「教会のご案内」をクリックすると表示されたメニューが表示されていない状態に戻すように表示をしたいんです。 説明下手ですが、おわかりになる方タグなどを教えてくださいｖ(。・・。)
- ベストアンサー
- JavaScript
- IEだけで動くツリー表示
はじめまして。 IEだけで動くツリー表示をしたいと思っています。 ファイルを読み込んだとき、IEだけツリーの内容を閉じた状態で表示し、 それ以外のものは開いた状態で、ツリーの動作をしなくても良いと思っています。 一体どうすればいいでしょうか？？ -----------------------------ソース--------------------------------- <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <script Language="JavaScript"><!-- function check(){ str = navigator.appName.toUpperCase(); if (str.indexOf("EXPLORER") >= 0){ treeMenu1.display = "none"; } } function exMenu(tName) { tMenu = document.all[tName].style; if (tMenu.display == 'none') tMenu.display = "block"; else tMenu.display = "none"; } // --></script> </head> <body bgcolor="#FFFFFF" Onload="check()"> <a href="javaScript:exMenu('treeMenu1')">タイトル</a> <div id="treeMenu1"> <table border=0 cellspacing=2 cellpadding=2 width="100%"> <tr bgcolor="#ffffff"> <td><font color="#808080"> <ul> <li>内容１ <li>内容２ <li>内容３ <li>内容４ <li>内容５ <li>内容６ </ul> </font></td> </tr> </table> </div> </body> </html>
- ベストアンサー
- JavaScript
お礼
ありがとうございます。難しいのですね。残念です…