Mozillaでツリーメニュー内のリンクが動作しない
- Mozillaでツリーメニュー内のリンクが動作しない理由について説明します。
- ツリーメニュー内できちんとリンクを機能させる方法について教えてください。
- FireFoxなどのMozilla系ブラウザでツリーメニューのリンクが動作しない問題について質問します。
- ベストアンサー
Mozillaでツリーメニュー内のリンクが動作しない
http://oshiete1.goo.ne.jp/qa3462499.html こちらで質問した者ですが、その後原因がおぼろげながら掴めてきた＝質問の趣旨が変わってきたのと、のんびりしてもいられなくなったので こちらで再度質問させていただきます。 現在、フレームを使用したページを作成しています。上フレーム（top）と左下フレーム（menu）、右下フレーム（main）の構成です。 menuページでは以下のツリーメニュースクリプトを利用していますが、FireFoxなどのMozilla系ブラウザでは、下記ソースの<ul id="treemenu">以下のリンクが動作せず、ページを表示することができません。（IEでは動作します） 「スクリプトを削除する」もしくは「id="treemenu"を削除する」、または「リンクの上で右クリック→新しいタブ（ウィンドウ）で開く」ことで、Mozilla系ブラウザでもページが開くことは確認したのですが、どうしたらIE・Mozillaに関わらず、ツリーメニュー内できちんとリンクを機能させることができるのでしょうか？ ////////////////////////以下ソース////////////////////////// <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> //メニューIDを列記 var has_event_id = new Array("treemenu"); //初期動作 if(document.all || document.getElementById){ window.onload = ice_menu_initialize; } //関数郡 function ice_menu_initialize(){ for (i=0;i<has_event_id.length;i++){ menu_lists = document.getElementById(has_event_id[i]).getElementsByTagName("li"); for (j=0;j<menu_lists.length;j++){ if(document.all && document.getElementById){ menu_lists.item(j).onclick = ice_menu; }else if(document.getElementById){ menu_lists.item(j).addEventListener("click", ice_menu, false); } } } if(document.hasChildNodes){ var child_lists = document.getElementsByTagName("ul"); for (i=0;i<child_lists.length;i++){ if(child_lists.item(i).getAttribute("class")=="list-child" || child_lists.item(i).getAttribute("className")=="list-child"){ child_lists.item(i).style.display="none"; } } } } //メニュー開閉部 function ice_menu(evt){ var parent_tree_menu = this; if(parent_tree_menu.getElementsByTagName('ul').item(0)){ var child_menu = parent_tree_menu.getElementsByTagName('ul'); if (child_menu.item(0).style.display == 'block'){ child_menu.item(0).style.display = 'none'; for(i=0;i<child_menu.length;i++){ if(child_menu.item(i).getAttribute("class") == "list-child" || child_menu.item(i).getAttribute("className") == "list-child"){ child_menu.item(i).style.display = 'none'; } } }else{ child_menu.item(0).style.display = 'block'; } } if(document.all && document.getElementById){ event.cancelBubble=true; }else if(document.getElementById){ evt.stopPropagation(); evt.preventDefault(); } } </script> <title>メインメニュー</title> </head> <body> <ul> <li>●メニュー１ <ul> <li>▽<a href="test.html" target="main">サブメニュー１</a></li> <li>▽<a href="test.html" target="main">サブメニュー２</a></li> <li>▽<a href="test.html" target="main">サブメニュー３</a></li> </ul> </li> </ul> <ul> <li><span id="top">●メニュー２</span> <ul id="treemenu"> <li>▽<a href="test.html" target="main">サブメニュー１</a></li> <li>▽<a href="test.html" target="main">サブメニュー２</a></li> <li>▼<a href="#top">サブメニュー３</a> <ul class="list-child"> <li>┣<a href="minitest.html" target="main">ミニメニュー１</a></li> <li>┗ミニメニュー２</li> </ul> </li> <li>▼<a href="#top">サブメニュー４</a> <ul class="list-child"> <li>┣<a href="minitest.html" target="main">ミニメニュー１</a></li> <li>┗ミニメニュー２</li> </ul> </li> </ul> </li> </ul> </body> </html> //////////////////////////ここまで//////////////////////////// ※CSS用のクラスは紛らわしいので省いてあります。
- rusya
- お礼率56% (167/295)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
document.all && document.getElementById をすべて document.all || document.getElementById にする。
関連するQ&A
- ツリーメニューについて
フレームページで、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
- ツリーメニューを２個つづけると
<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を利用して折りたたみメニューを作成しました。 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のツリーメニューについて▲▲
現在このような記述でツリーメニューを作っています 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
- 展開メニューの修正
展開メニューの修正 をしています。 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
- ツリーメニューで子のページのとき親が開く
他のプログラムと連携しています 現時点ではクリックすれば親が開き子の部分が出てくるようにしています。 子のページのＵＲＬを見たときに ツリーのその親は自動的に開きたいのです。 show('1');のこの”１”は他のプログラムから出力しているものです。 子のものも同じように値を出力できるのですが JavaScriptでどのように書けば親が開くのかよくわかりません＾＾；。 よろしくお願いします。 //javascript// function show(inputData) { var objID=document.getElementById( "obj_" + inputData ); var buttonID=document.getElementById( "button_" + inputData ); if(objID.className=='close'){ objID.style.display='block'; objID.className='open'; buttonID.src='images/close.gif'; } else{ objID.style.display='none'; objID.className='close'; buttonID.src='images/open.gif'; } } //HTML// <ul> <li><input type="image" src="images/open.gif" id="button_1" onclick="show('1');"> <a href="javascript:show(1)">Ａメニュー</a> </li> <div id="obj_1" style="display:none;position:relative;" class="close"> <ul><li><a href="11.html" >Ａ-1メニュー </a></li> <li><a href="12.html">Ａ-2メニュー </a></li> <li><a href="11.html" >Ａ-3メニュー </a></li> </ul> </div> </ul> <ul> <li><input type="image" src="images/open.gif" id="button_2" onclick="show('2');"> <a href="javascript:show(2)">Ｂメニュー</a> </li> <div id="obj_2" style="display:none;position:relative;" class="close"> <ul><li><a href="21.html">Ｂ-1メニュー </a></li> <li><a href="22.html">Ｂ-2メニュー </a></li> <li><a href="23.html">Ｂ-3メニュー </a></li> </ul> </div> </ul>
- 締切済み
- JavaScript
- 画像メニューの開閉
JavaScriptで画像メニューの開閉を行いたいのですが、 うまく動きません。 「aaa」が閉じていた場合には「aaa」を開くまではできたのですが、 「bbb」を閉じるという１行を追加したら動かなくなりました。 どなたかご教授願います。 【JavaScript】 function showSubmenu01() { if(document.getElementById("aaaSub").innerHTML == '') document.getElementById("aaaSub").innerHTML = '<img src="aaa.gif">'; document.getElementById("bbbSub").innerHTML = ''; else document.getElementById("aaaSub").innerHTML = ''; } 【HTMLソース】 <ul> <li><a href="#" onClick="showSubmenu01()"><img src="img/menu_aaa.gif" /></a></li> <li><div id="aaaSub"></div></li> <li><div id="bbbSub"><img src="bbb.gif" /></div></li> </ul>
- ベストアンサー
- 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
- ツリーメニューの画像表示について
ツリーメニューの画像の表示場所について困っております。 ＋画像をクリックすると階層が開き－の画像をクリックすると 階層が閉じる仕様です。 動作は正常なのですが画像がリンクの上に表示されてしまい 文字の横に表示させることができません。 具体的には以下のようなレイアウトです。 ＋ 大メニュー これを ＋ 大メニュー のようなレイアウトにしたいのですがどのようにすればいいもの でしょか？ cssでwidthを設定してしまうとこのような現象になってしまいますが レイアウト上widthの指定ははずせないもので・・・ ソースは以下のようになっております。 ---menu.js--- function setCookie(key,val){ tmp = key+"="+escape(val)+";"; tmp += "expires=Fri, 31-Dec-2030 23:59:59;"; document.cookie = tmp; }; function getCookie(key){ tmp = document.cookie+";"; tmp1 = tmp.indexOf(key,0); if(tmp1 != -1){ tmp = tmp.substring(tmp1,tmp.length); start = tmp.indexOf("=",0); end = tmp.indexOf(";",start); return(unescape(tmp.substring(start+1,end))); } return(""); }; function delCookie(key){ expiredate = new Date(); expiredate.setYear(expiredate.getYear()-1); tmp = key+"=;"; tmp += "expires="+expiredate.toGMTString(); document.cookie = tmp; }; no=0; window.onload=function(){ var ie=(navigator.appName.indexOf("Microsoft") >= 0); var g_nav=document.getElementById('g_nav'); g_nav.setChild=setChild; g_nav.setChild(); var ulgroup=g_nav.getElementsByTagName('UL'); for(var i=0;i<ulgroup.length;i++){ if(ie) ulgroup[i].style.height=0; ulgroup[i].setChild=setChild; ulgroup[i].setChild(); } } function changeImg(){ var cnode=this.childNodes; for(var i=0;i<cnode.length;i++){ if(cnode[i].nodeName=="IMG"){ cnode[i].src=(this.dispChild==false)?"hide.gif":"show.gif"; } } } function setChild(){ var cnode=this.childNodes; var preobj=new Object; var obj=new Object; for(var i=0;i<cnode.length;i++){ if(cnode[i].nodeName=="LI"){ if(cnode[i].getElementsByTagName('ul').length>0){ var dispFlg= getCookie("ul") & Math.pow(2,no); preobj.no=no++; preobj.dispChild=dispFlg; preobj.child=cnode[i]; preobj.changeImg=changeImg; preobj.innerHTML="<div style='position: fixed; top: 16px; left: 5px;'><img src='hide.gif'></div>"+preobj.innerHTML if(preobj.dispChild==false) preobj.child.style.display="none"; else preobj.changeImg(); preobj.onclick=function(){ this.dispChild=(this.dispChild==false)?true:false; if(this.dispChild==false) this.child.style.display="none"; else this.child.style.display=""; this.changeImg(); var ul=getCookie("ul") ^ Math.pow(2,this.no); setCookie("ul",ul); } } preobj=cnode[i]; } } } ---menu.css--- #g_nav { width: 160px; margin: 0; padding: 0; background: #396; } #g_nav ul.sub_b { width: 160px; margin: 0; padding: 0; background: #fff; } #g_nav li.sub { width: 160px; list-style: none; margin: 0; border-bottom: solid 1px #999; } #g_nav li.sub a { font-size: 12px; color: #333; font-weight: bold; padding: 4px 0; text-decoration: none; background: #fff; } #g_nav li sub a:hover { background: #3c6; } ---menu.html--- <div id="g_nav"> <ul> <li class="sub_t"><a href="">大メニュー</a></li> <li> <ul class="sub_b"> <li class="sub"><a href="">小メニュー1</a></li> <li class="sub"><a href="">小メニュー2</a></li> </ul> </li> </ul> </div> わかりづらい質問になってしまいましたが足りない情報につきましては 補足させて頂きます。 どうぞ宜しくお願い致します。
- ベストアンサー
- JavaScript
- リンク押下でタグを書き換えたい
リンクが複数あって、押したリンク文字だけ<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
お礼
お礼が遅くなりまして申し訳ありません。 ご回答いただいた方法で動作確認できました。ありがとうございました。