- ベストアンサー
階層ツリーの書き方
現在このように書いたのですが、 ＋の下に不要な下線がひょうじされてしまいます。 それをなくし、ツリーが表示されたら、－が表示されてほしいのです。 ＋ －でツリーを操作できるようにしたいです。 書き方、参照ページを教えてください。 よろしくお願いいたします。 <body bgcolor="white"> ■検索サイト<br> <a href="javaScript:exMenu('treeMenu1')">＋</a>■検索サイト１<br> <div id="treeMenu1" style="display:none"> ├<a href="http://www.yahoo.co.jp/">Yahoo!</a><br> ├<a href="http://www.goo.ne.jp/" >Goo</a><br> ├<a href="http://www.lycos.co.jp/">Lycos</a><br> └<a href="javaScript:exMenu('treeMenu2')">＋</a>■検索サイト２<br> <div id="treeMenu2" style="display:none"> ├<a href="http://www.infoseek.co.jp/">Infoseek</a><br> ├<a href="http://www.google.com/" >Google</a><br> └<a href="http://kids.goo.ne.jp/">Kids Goo</a><br> </div> </div> </body>
- emiemizou
- お礼率81% (9/11)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
menuものはいろいろやり方がありますが、構造が一番大事ですね。 構造さえきまってしまえばあとは最低限のスクリプトとスタイルシートで 対応可能です。 こんな感じでどうでしょう？ <style> #menu ,#menu *{margin:0px;padding:0px;list-style:none;} #menu li .plus {display:inline;} #menu li .minus{display:none;} #menu li.close .plus {display:none;} #menu li.close .minus{display:inline;} #menu li.close ul {display:none;} </style> <script> window.onload=function(){ var menu=document.getElementById("menu"); var tags=menu.getElementsByTagName("a"); for(var i=0;i<tags.length;i++){ if(tags[i].href.match(/#$/)){ tags[i].onclick=function(){ var p=this.parentNode; while(p){ if(p.nodeName=="LI"){ p.className=p.className==""?"close":""; break; } p=p.parentNode; } } } } } </script> <ul id="menu"> <li> <div><a href="#"><span class="plus">＋</span><span class="minus">－</span></a>■検索サイト１</div> <ul> <li>├<a href="http://www.yahoo.co.jp/">Yahoo!</a></li> <li> <div>├<a href="#"><span class="plus">＋</span><span class="minus">－</span></a>■検索サイト２</div> <ul> <li>│├<a href="http://www.infoseek.co.jp/">Infoseek</a></li> <li> <div>│├<a href="#"><span class="plus">＋</span><span class="minus">－</span></a>■検索サイト３</div> <ul> <li>││├<a href="test">test</a></li> <li>││├<a href="test">test</a></li> <li>││└<a href="test">test</a></li> </ul> </li> <li>│├<a href="http://www.google.com/">Google</a></li> <li>│└<a href="http://kids.goo.ne.jp/">Kids Goo</a></li> </ul> </li> <li>├<a href="http://www.goo.ne.jp/">Goo</a></li> <li>├<a href="http://www.lycos.co.jp/">Lycos</a></li> <li> <div>└<a href="#"><span class="plus">＋</span><span class="minus">－</span></a>■検索サイト４</div> <ul> <li> ├<a href="test">test</a></li> <li> ├<a href="test">test</a></li> <li> └<a href="test">test</a></li> </ul> </li> </ul> </li> </ul>
その他の回答 (1)
- yambejp
- ベストアンサー率51% (3827/7415)
＞アンダーバーが出てしまいますが、これは消す事できないのでしょうか？ スタイルシートに #menu div a{text-decoration:none;} を追加してください
お礼
思ってるようにできました。 ありがとうございました。
関連するQ&A
- 階層ツリーについて
■検索サイト<br> <a href="javaScript:exMenu('treeMenu1')">＋</a>■検索サイト１<br> <div id="treeMenu1" style="display:none"> ├<a href="http://www.yahoo.co.jp/">Yahoo!</a><br> ├<a href="http://www.goo.ne.jp/" >Goo</a><br> ├<a href="http://www.lycos.co.jp/">Lycos</a><br> └<a href="javaScript:exMenu('treeMenu2')">＋</a>■検索サイト２<br> <div id="treeMenu2" style="display:none"> ├<a href="http://www.infoseek.co.jp/">Infoseek</a><br> ├<a href="http://www.google.com/" >Google</a><br> └<a href="http://kids.goo.ne.jp/">Kids Goo</a><br> </div> </div> このように書いているのですが、 検索サイト2←これもクリックし、リンクできるようにしたいのですが、どのように書いたらできますか？ 教えてください。 よろしくお願いいたします。
- ベストアンサー
- HTML
- メニューのツリー化で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
- メニューバーを製作しています
今 メニューバーを製作しています 検索サイト１ 検索サイト２ 検索サイト３ すべて、サイドページ付です ここまでコピーや改造で出来ました 解らない事 １ 検索サイト１をクリックし次に検索サイト２をクリックした時に検索サイト１が 自動で閉まる用にしたいのですが、上手く出来ません アドバイスを願いします JavaScript・HTML・ｓｃｃ ソースです よろしくお願いします <script Language="JavaScript"><!-- function exMenu(tName) { tMenu = document.all[tName].style; if (tMenu.display == 'none') tMenu.display = "block"; else tMenu.display = "none"; } // --></script> </HEAD> <BODY bgcolor="white"> <div><A href="javaScript:exMenu('treeMenu')">＋■検索サイト1</A><br> <div id="treeMenu" style="display:none">├<A href="http://www.yahoo.co.jp/">Yahoo!</A><br> ├<A href="http://www.goo.ne.jp/">Goo</A><br> └<A href="http://www.lycos.co.jp/">Lycos</A><br> </div> <A href="javaScript:exMenu('treeMenu1')">＋■検索サイト2</A><br> <div id="treeMenu1" style="display:none">├<A href="http://www.yahoo.co.jp/">Yahoo!</A><br> ├<A href="http://www.goo.ne.jp/">Goo</A><br> └<A href="http://www.lycos.co.jp/">Lycos</A><br> </div> <A href="javaScript:exMenu('treeMenu2')">＋■検索サイト3</A><br> <div id="treeMenu2" style="display:none"> ├<A href="http://www.yahoo.co.jp/">Yahoo!</A><br> ├<A href="http://www.goo.ne.jp/">Goo</A><br> └<A href="http://www.lycos.co.jp/">Lycos</A><br> </div> </div>
- 締切済み
- CSS
- アドバイスお願いします
今 メニューバーを製作しています 検索サイト１ 検索サイト２ 検索サイト３ すべて、サイドページ付です ここまで出来ました 解らない事 １ 検索サイト１をクリックし次に検索サイト２をクリックした時に検索サイト１が 自動で閉まる用にしたいのですが、上手く出来ません アドバイスを願いします JavaScriptとHTML ソースです ｓｃｃは使用していません よろしくお願いします <script Language="JavaScript"><!-- function exMenu(tName) { tMenu = document.all[tName].style; if (tMenu.display == 'none') tMenu.display = "block"; else tMenu.display = "none"; } // --></script> </HEAD> <BODY bgcolor="white"> <div><A href="javaScript:exMenu('treeMenu')">＋■検索サイト1</A><br> <div id="treeMenu" style="display:none">├<A href="http://www.yahoo.co.jp/">Yahoo!</A><br> ├<A href="http://www.goo.ne.jp/">Goo</A><br> └<A href="http://www.lycos.co.jp/">Lycos</A><br> </div> <A href="javaScript:exMenu('treeMenu1')">＋■検索サイト2</A><br> <div id="treeMenu1" style="display:none">├<A href="http://www.yahoo.co.jp/">Yahoo!</A><br> ├<A href="http://www.goo.ne.jp/">Goo</A><br> └<A href="http://www.lycos.co.jp/">Lycos</A><br> </div> <A href="javaScript:exMenu('treeMenu2')">＋■検索サイト3</A><br> <div id="treeMenu2" style="display:none"> ├<A href="http://www.yahoo.co.jp/">Yahoo!</A><br> ├<A href="http://www.goo.ne.jp/">Goo</A><br> └<A href="http://www.lycos.co.jp/">Lycos</A><br> </div> </div>
- 締切済み
- CSS
- ３階層メニューについての質問です。
元の文字 →あ →Ａ →Ｂ →い →Ｃ →Ｄ 「元の文字」をクリックすると「あ」「い」が同時に出現。 「あ」をクリックすると「Ａ」「Ｂ」が出現。 となるようにしたいのですが、 <HEAD>～</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> <BODY>～</BODY>内↓ <A href="javaScript:treeMenu('treeMenu1')">元の文字</A><br> <DIV id="treeMenu1" style="display:none"> <br> <A style="color :white;" href="javaScript:treeMenu('treeMenu2')"> あ</A><br> <DIV id="treeMenu2" style="display:none"> <A style="color : red;" href="＊＊＊(←URL省略)">Ａ</A><BR> <A style="color : red;" href="＊＊＊">Ｂ</A><BR> <br> <A style="color : white;" href="javaScript:treeMenu('treeMenu3')"> い</A><br> <DIV id="treeMenu3" style="display:none"> <A style="color : red;" href="＊＊＊">Ｃ</A><BR> <A style="color : red;" href="＊＊＊">Ｄ</A><BR> </DIV> </DIV> </DIV> とすると、 「元の文字」をクリックすると「あ」が出現。 「あ」をクリックすると「Ａ」「Ｂ」「い」が出現となります。 上記タグを少し変更して「あ」「い」を 同時に出現させる方法を教えて頂きたいです。 treeMenu○部分の変更で、出来るかと思ったのですが、 上手くいきませんでした。 宜しくお願い致します。
- ベストアンサー
- JavaScript
- 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
- JavaScriptで、タグを書き出す方法
フレ－ムを使わずにスタイルシ－トでメニュ－を表示する領域を指定して、その領域内にメニュ－（目次）を表示したいのですが、一度で全てを書きかえられるようにJavaScriptを外部ファイルにしてメニュ－が表示出来るようにしたいと思います。 スタイルシ－トの部分では *{ font-size:12px; line-height;125%; } #menu{ padding-top:12px; padding-left:12px; position:absolute; top:110px; width:150px; background-color:#cc99cc } em{ font-style:normal; font-weight:400 } #ind1{ padding-left:12px } で、メニュ－を表示する領域等を決めています。 <body>～</body>の間では、 <div id="menu"> <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('treeMenu1')">１</a><br> <div id="treeMenu1" style="display:none"> <a href="javaScript:exMenu('treeMenu2')"><em id="ind1">１－１</em></a><br> <div id="treeMenu2" style="display:none"> <a href="1-1-1.html"><em id="ind1">１－１－１</em></a><br> <a href="1-1-2.html"><em id="ind1">１－１－２</em></a><br> </div> </div> でメニュ－を表示するようにしています。 この<body>～</body>の間の部分を、 <div id="menu"> 外部ファイルのJavaScriptを呼び出すタグ </div> というようにして、外部ファイルのJavaScriptのみを書きかえるだけで全てのペ－ジのメニュ－が変えられるようにしたいと思います。 この場合の、 １：勝手に書いてくれる外部ファイルにするJavaScriptの記述のしかた ２．１を呼び出すタグの記述 を教えて下さい。
- ベストアンサー
- 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でツリー表示をしたいのですが、全くの素人で、一番やりやすそうなソースを見つけ、『“tree1”を変更して使用』と説明にはあったのですが、実際には『JavaScript:ok('tree1');"』とアドレスに表示されるだけで、目的のツリー表示をしてくれません。 どうしたら、良いでしょうか？ <SCRIPT language="JavaScript"> <!-- function ok(id){if(document.all(id).style.display == "none"){document.all(id).style.display="block";}else{document.all(id).style.display="none";}} //--> </SCRIPT> <B><A HREF="JavaScript:ok('tree1');">■メニュー</A></B><BR> <DIV ID="tree1" style="display:none;"> ┣ あああ<BR> ┣ いいい<BR> ┣ ううう<BR> ┣ えええ<BR> ┗ おおお<BR> </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
お礼
ありがとうございます。 早速、作成させていただきます。 ところで、 ■検索サイト１ ■検索サイト1の前の＋の下にアンダーバーが出てしまいますが、これは消す事できないのでしょうか？ 私が何か間違っているのでしょうか？ ありがとうございます。