- ベストアンサー
ツリーメニューについて、構文エラーがでてしまう。
いつもお世話になっております。 カテゴリー違いかもしれませんが、どこがいいかわからなかったもので。 ツリーメニューを作る為に検索で探して、JavaScriptを使わない方法で下記のやり方があったので試してみたら成功したのですが、ビルダーを使ってタグを入れると構文エラーがでます。 例えば、タグ(DIV)の位置が無効ですとか 属性名が未定義です。とか言った感じで・・・。 どこがおかしいのでしょうか？ 無視していても平気なものかどうか、どうぞ宜しくお願い致します。 なお、殆どコピーで作ったので全くと言っていいほど簡単なhtmlぐらいの知識しかありませんので、難しいこと言われてもわかりませんので お手数ですが宜しくお願いします＾＾； <STYLE type="text/css"> <!-- .time{behavior: url(#default#time2);} --> </STYLE> </HEAD> <BODY> <IMG id="b1a" src="gazwu/+.gif" border="0" class="time" begin="0;b1b.click" end="b1a.click" timeaction="display"> <IMG id="b1b" src="gazwu/-.gif" border="0" class="time" begin="b1a.click" end="b1b.click" timeaction="display"> シャネル <DIV id="d1" class="time" begin="b1a.click" end="b2b.click" timeaction="display"> ├ <A href="#">シャネル</A><br> ├ <A href="#">シャネル財布</A><BR> └ <A href="#">シャネル アクセサリー</A> </DIV> </BODY> </HTML>
- みんなの回答 （3）
- 専門家の回答
関連するQ&A
- DHTML ツリーメニュー ＊ 教えてください！
こんにちは。デザイナーなんですが、DHTMLツリーメニューを作っています。ウェブ上でソースを見つけて、いじくってみているんですが、上手くいきません。どなたかご存知でしたら、教えてください。 作ろうとしているメニューは メルシー３ ├メルシー３の特徴 ├メルシー３の仕組 ├メルシー３の償還例 └お申込メモ/運用レポート メルシー４ ├メルシー４の特徴 ├メルシー４の仕組 ├メルシー４の償還例 └お申込メモ/運用レポート 。。というかんじで、メルシー３、４をクリックすると、 詳細メニュがツリーメニューで見れるというものです。 ＊問題は＊＊＊ ほかの項目をクリックすると開いていた項目が閉じるようにしたいのです。今のままだと、一度クリックして開けてしまうと、他の項目をクリックしても、開いたままになっています。 例えば、すべての項目が閉じている状態からはじめます。 メルシー３をクリックすると、ツリーメニューで次の断層のリンクが出てきます。メルシー４をクリックすると、今の状態ではメルシー３が開いたまま、メルシー４が開いてしまいます。 これをデフォルトで１つの項目しか開かないようにしたいのです。 スクリプトの現状は以下のようになっています。 <script type="text/javascript"><!-- if (document.getElementById) document.write('<style type="text/css"> .tree { display: none; }<'+'/style>'); function tree(id) { if (document.getElementById(id).style.display == "block") document.getElementById(id).style.display="none"; else document.getElementById(id).style.display="block"; parent.contents.open(id+".html","contents") } と定義して <tr> <td id="sub"> <a href="javascript:tree('contents/mercy3');" title="クリックでメニューが開閉します">メルシー３</a><br></td> </tr> <td> <div id="contents/mercy3" class="tree"> ├<a href="#" target="contents">メルシー３の特徴 </a><br> ├<a href="未設定" target="contents">メルシー３の仕組 </a><br> ├<a href="未設定" target="contents">メルシー３の償還例 </a><br> └<a href="未設定" target="contentss">お申込メモ/運用レポート </a></div></td> </tr> <tr> <td id="sub"> <a href="javascript:tree('contents/mercy4');" title="クリックでメニューが開閉します">メルシー４</a><br></td> </tr> <tr> <td> <div id="contents/mercy4" class="tree"> ├<a href="#" target="contents">メルシー４の特徴 </a><br> ├<a href="未設定" target="contents">メルシー４の仕組 </a><br> ├<a href="未設定" target="contents">メルシー４の償還例 </a><br> └<a href="未設定" target="contentss">お申込メモ/運用レポート </a></div></td> </tr> とボディーで記述しています。 どなたか、ご存知でしたら、よろしくお願いいたします。
- 締切済み
- JavaScript
- 階層ツリーについて
■検索サイト<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
- ツリーメニューを２個つづけると
<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サービス）
- ツリーメニューで子のページのとき親が開く
他のプログラムと連携しています 現時点ではクリックすれば親が開き子の部分が出てくるようにしています。 子のページのＵＲＬを見たときに ツリーのその親は自動的に開きたいのです。 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のツリーメニューについて▲▲
現在このような記述でツリーメニューを作っています 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
- ３階層メニューについての質問です。
元の文字 →あ →Ａ →Ｂ →い →Ｃ →Ｄ 「元の文字」をクリックすると「あ」「い」が同時に出現。 「あ」をクリックすると「Ａ」「Ｂ」が出現。 となるようにしたいのですが、 <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
- メニューのツリー化で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
- コンテンツとコンテンツの詰まり
Windows XP あるいは8 HTML 4.01 コピー ～ TOP.html copyTOP.css あああああ と いいいいいの間隔はあいているのに いいいいい と うううううの間隔はなぜか詰ってしまっています。 間隔を空けるにはどうしたらいいでしょうか？ コードは以下の通りです。 [ HTML 側 ] <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/Transitional.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" Content="text/html;charset=Shift_JIS"> <META HTTP-EQUIV="CONTENT-STYLE-TYPE" CONTENT="～"> <title>aaaaaaaaaa</title> <link rel="stylesheet" href="copyTOP.css" type="text/css"> </head> <body> <div id="zentai"> <div id="part"> <p class="title">あああああ</p> <div id="partnerwaku"> <div id="partnerimage"> <a href="" alt="のロゴ" class=""></a> <a href="" alt="のロゴ" class=""></a> <a href=""><img src=".gif" alt="のロゴ" class=""></a> <a href=""><img src=".jpg" alt="のロゴ" class="A"></a> <a href=""><img src=".jpg" alt="のロゴ" class=""></a> </div> </div> </div> <div id="PR"> <PR> <br> <div id="PRsection"> <br> <a href=""> <img src="" alt="" class="PRimage01"></a> </div> </div> <div id="PR2"> <br> <PR> <br> <div id="PRsection2"> <br> <a href=""> <img src="" alt="" class="PRimage02"></a> </div> </div> <div id="columnwaku"> <div id="columnbun"> <p class="title">いいいいい</p> <div id="columncontents"> <p><a href=""><img src =".jpg" class="columnarticle01"></a></p> </div> </div> </div> <br> <br> <br> <br> <div id="PR3"> <br> <PR> <br> <div id="PRsection3"> <br> <a href=""><img src="" alt="" class="PRimage03"></a> </div> </div> <br> <br> <br> <br> <br> <div id="questionnairesection"> <div id="questionnaire"> <p class="title">ううううう</p> <div id="questionnairecontents">えええええ</div> </div> </div> <div id="PR4"> <br> <ddd> <br> <div id="PRsection4"> <br> <a href=""> <img src="" alt="" class="PRimage04"></a> </div> </div> <div id="pagetop"> <br> <br> <a href="#logoimage">ページの先頭へ▲</a> </div> <hr class="beforefooter"> <div id="aboutus"> <div id="aboutussection"> <p class="aboutustitle">管理会社</p> <p><a href="Aboutus.html"><img src ="Aboutus.jpg" class="aboutusimage"></a></p> </div> </div> <br> <br> <hr class="beforefooter"> </div> <!--全体のdiv--> </body> </html> [ css側] @charset "Shift_Jis"; body { overflow-y:auto overflow-x:auto text-align:center; cursor:url("images/.png"); } #allitem{ cursor:url("images/.png"); } #zentai{ width:1000px; margin-left:auto; margin-right:auto; } .title{ margin-top:0px; margin-bottom:0px; font-size : 20px; border-style:solid; width:592px; background-color:#FFFF99; padding:3px; } #part{ clear:left; float:left; height:180px; width:642px; padding-right:147px; font-size : 20px; } #partnerwaku{ height:140px; width:600px; border-style:solid; border-color: #000099; } #PR{ float:left; width:180px; height:120px; } #PRsection{ border-style:solid; border-color: #000099; } #PR2{ float:left; width:185px; height:150px; } #PRsection2{ border-style:solid; border-color: #000099; } .PRimage01{ width:170px; height:80px; } .PRimage02{ width:165px; height:100px; } #kuhaku{ clear:left; height:20px; } #columnwaku{ float:left; clear:left; height:130px; width:790px; } #columnbun{ height:120px; width:600px; } #columncontents{ height:140px; width:600px; border-style:solid; border-color: #000099; } .columnarticle01{ height:70px; width:400px; background-color:#CC99CC; } #PR3{ float:left; width:185px; height:150px; } #PRsection3{ border-style:solid; border-color: #000099; } .PRimage03{ width:165px; height:100px; } #questionnairesection{ clear:left; float:left; height:130px; width:1050px; } #questionnaire{ width:600px; border-radius: 20px; } #questionnairecontents{ height:140px; width:600px; border-style:solid; border-color: #000099; } #PR4{ float:left; width:185px; height:150px; } #PRsection4{ border-style:solid; border-color: #000099; } .PRimage04{ width:165px; height:100px; } 文字制限のため省略
- ベストアンサー
- HTML
- 階層ツリーの書き方
現在このように書いたのですが、 ＋の下に不要な下線がひょうじされてしまいます。 それをなくし、ツリーが表示されたら、－が表示されてほしいのです。 ＋ －でツリーを操作できるようにしたいです。 書き方、参照ページを教えてください。 よろしくお願いいたします。 <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>
- ベストアンサー
- 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
お礼
回答有難うございます。 そうするとこのやり方では、やらない方が良いのでしょうかね？ 代わりの違うやり方ってないのかしら;;