リンク先でツリーを展開したままに
- こちらのソースをそのままコピペして自閉式ツリーメニューを作成しました。
- 動作はしましたが、ツリーが閉じてしまう問題があります。
- リンク先でメニューのツリーを展開したままにする方法を教えてください。
- ベストアンサー
リンク先でツリーを展開したままに
リンク先でツリーを展開したままに はじめまして、いつも参考にさせてもらってます。 こちらのソースをそのままコピペして自閉式ツリーメニューを作りました。 http://okwave.jp/qa/q5526156.html 動作はしましたが、メニューのリンクをクリックして他のページに行くとツリーが閉じてしまいます。 リンク先でそのメニューのツリーを展開したままにしたいのですが、できるでしょうか？ たとえばmenu1内のaaa.htmlへのリンクをクリックした場合、menu1のツリーが展開したままaaa.htmlが表示されるというようなことがしたいです。 もしだめならタイトル部分の文字色を変えるだけでもいいので、今このメニューだというのがわかるようにしたいのです。 javascriptは本当に初心者なので、わかりにくい質問ですみません。 教えてもらえると助かります。
- sumomo_yk
- お礼率100% (4/4)
- JavaScript
- 回答数3
- ありがとう数5
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
location.hrefでa要素を特定する手もありますね。 //sample.js //http://amenti.usamimi.info/treemenu2.htmlソースコード function tree2(menu_class,menu_id) { var div=document.getElementById(menu_id); if (div.style.display == "block") div.style.display="none"; else { var sib=div.parentNode.childNodes; for (var i=0; i < sib.length; i++) if (sib[i].className == menu_class) sib[i].style.display="none"; div.style.display="block"; } } //http://amenti.usamimi.info/treemenu2.htmlソースコードここまで function hoge(id) { var h = location.href; var elem = document.getElementById(id); if (!elem) return; var list = elem.getElementsByTagName('a'); for (var i = 0, len = list.length; i < len; i++) { if (list[i].href == h) { // href値で要素特定 list[i].parentNode.style.display = 'block'; // strong要素と置き換える var strong = document.createElement('strong'); while (list[i].firstChild) strong.appendChild(list[i].firstChild); list[i].parentNode.replaceChild(strong, list[i]); // strong要素と置き換えるここまで break; } } } // CSS document.write( '<style type="text/css">' + '.tree { display:none; }' + 'a { text-decoration:none; }' + 'a:hover { text-decoration:underline; }' + '.sp { text-decoration:underline; color: blue; cursor: pointer; }' + '<\/style>' ); //sample.jsここまで <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <title>sample</title> <meta http-equiv="content-style-type" content="text/css"> <meta http-equiv="content-script-type" content="text/javascript"> <script type="text/javascript" src="sample.js"></script> <style type="text/css"> h3 { margin: 10px 0; } </style> </head> <body onload="hoge('container1');"> <div id="container1"> <h3><span class="sp" onclick="tree2('tree', 'menu1');">クリック１</span></h3> <div class="tree" id="menu1"> ├<a href="aaa.html">aaaページ</a><br> └<a href="bbb.html">bbbページ</a><br> </div> <h3><span class="sp" onclick="tree2('tree', 'menu2');">クリック２</span></h3> <div class="tree" id="menu2"> ├<a href="ccc.html">cccページ</a><br> └<a href="ddd.html">dddページ</a><br> </div> </div> </body> </html>
その他の回答 (2)
- yyr446
- ベストアンサー率65% (870/1330)
質問者様の発想？を活かすべく、最近はやらないのですが、 フレームセットにしてみてはいかがですか？ メニューの部分は別途menu.htmlとして別途作成し、 メニュー用javascriptとCSSとHTMLを作っておきます。 トップページをフレームセットとして作成し、左フレームにmenu.html を配置、右フレームにメニューからリンクされるページを表示するように します。 さらに、追加で要望されている「選ばれた時メニュー内の項目が解る」 を実現するため、クリックしたリンクを太字（ボールド）にして開いた まま残すように、ご提示のjavascriptに追記しました。 こうなります。 まず、 （フレームセットのトップページ） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>TopPage</title> <frameset cols="200,*" frameborder="yes" border="1" framespcing="0"> <frame src="menu.html" id="menu" name="menu"> <frame src="about:blank" id="page" name="page"> </frameset> </html> メニューページの方は (menu.html) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>menu</title> <style type="text/css"> .tree {display:none;} a {text-decoration:none;} a:hover {text-decoration:underline;} </style> <script type="text/javascript" charset="utf-8"> <!-- window.onload = function () { try{ document.addEventListener('click',function(eve){clickFunc(eve)},true); }catch(e){ document.attachEvent('onclick',function(eve){clickFunc(eve)}); } function clickFunc(eve){ var elm= (eve.srcElement || eve.target); var brothers; if(elm.nodeName=="A"){ brothers = elm.parentNode.childNodes; for (var i=0;i<brothers.length;i++){ if(brothers[i].nodeType==1){ if(brothers[i] != elm){ brothers[i].style.fontWeight = 'normal'; }else{ brothers[i].style.fontWeight = 'bold'; } } } } } } function tree2(menu_class,menu_id){ var div=document.getElementById(menu_id); if (div.style.display == "block"){ div.style.display="none"; }else{ var sib=div.parentNode.childNodes; for (var i=0; i < sib.length; i++){ if (sib[i].className == menu_class) sib[i].style.display="none"; } div.style.display="block"; } } // --> </script> </head> <body> <a href="javascript:tree2('tree','menu1');" title="クリック！">クリック１</a><br> <div class="tree" id="menu1"> ├<a href="未設定" title="作成中です" target="page">妖しいページ</a><br> └<a href="未設定" title="教えられません" target="page">秘密のページ</a><br> </div> <a href="javascript:tree2('tree','menu2');" title="クリック！">クリック２</a><br> <div class="tree" id="menu2"> ├<a href="未設定" title="忘れました" target="page">アホなページ</a><br> ├<a href="未設定" title="ぶっ飛びました" target="page">ハイなページ</a><br> └<a href="未設定" title="公開できません" target="page">シャイなページ</a><br> </div> <a href="javascript:tree2('tree','menu3');" title="クリック！">クリック３</a><br> <div class="tree" id="menu3"> ├<a href="未設定" title="封印されました" target="page">邪悪なページ</a><br> └<a href="未設定" title="実在しません" target="page">幻のページ</a><br> </div> </body> </html> となります。 メニュー部 <a href="未設定" title="実在しません" target="page">幻のページ</a> のtarget="page"の"page"が、親フレームセットで定義した右側のフレーム の名前となります。 ※フレームはもう古いと思ったら、AJAXになります。その場合は、 ページ遷移はしませんね。
お礼
返信が遅くなりすみません。 参考にさせていただきます。 ありがとうございました。
- yambejp
- ベストアンサー率51% (3827/7415)
状況がよくわからないのですが。aaa.htmlに開いたメニューを 書いておくというのは現実的ではありませんか？
お礼
返信が遅くなりすみません。 参考にさせていただきます。 ありがとうございました。
関連するQ&A
- 自閉式ツリーの修正について
こんにちは。いつもお世話になっております。 こちらを参考に自閉式ツリーを作りました。 http://amenti.usamimi.info/treemenu2.html --------------------------------------------------------------- <p><a href="javascript:tree2('tree','menu1');" title="ツリーあり">ツリーあり</a></p> <div class="tree" id="menu1"> <ul> <li><a href="aaa.html" title="aaa">aaa</a></li> <li><a href="bbb.html" title="bbb">bbb</a></li> </ul> </div> <p><a href="nashi.html" title="ツリーなし">ツリーなし</a></p> --------------------------------------------------------------- ツリーにする必要のないメニューがあったので、上記の通り<div>～</div>を消したのですが、そのメニューをクリックしても開いたメニューが閉じてくれません。 いろいろと試したのですが駄目だったので、質問に伺いました。 どのように修正をしたらうまく動作するでしょうか。 ご教示のほどよろしくお願いします。
- ベストアンサー
- JavaScript
- ツリーメニューについて質問です。
ツリーメニューについて質問です。 いくつかのサイトを参考にし、コピー＆ペーストでjavascriptを使ってツリーメニューを作成したのですが、ツリーメニューが展開された状態で表示されてしまいます。 閉じた状態で表示したいのですが、どうすればいいでしょうか。 ここにソースを載せようと思いましたが入りませんでしたので、載せられません。 主に参考にしたのは、このサイトです。 http://himajin.moo.jp/java/menu2.html このサイトのものに何を足せば良い、とかそのようなソースが載っているサイトがもしあれば教えてほしいです。 よろしくお願いします。 ちなみに私は超初心者です＞＜
- ベストアンサー
- JavaScript
- ツリーメニューでクッキーを使いたいのですが・・
JavaScript初心者です。ツリーメニューを使いたいのですが、リンクから別のページ（別のディレクトリ）に移動した時、クッキーを使って、展開した状態を保持したいのですが、よく分かりません。 enptybox22さんの http://oshiete.homes.jp/qa3084680.html 回答記事にあったクッキー処理のプログラムをそのまま入れてみたのですがうまく動きません。 設置URLは http://blove.cc/tes1/ になります。 どうぞよろしくお願いいたします。
- 締切済み
- JavaScript
- 戻ってきた時ツリーメニューが開いているようにクッキーを保存させたい
タイトルの通り、開いたツリーメニューからリンクを踏んで、またメニューのあるページに戻ってきた時にメニューを開いたままにしたいです。 色々と調べるうちにcookieを使うことはわかったのですが、どこもツリーメニューの方法が違うため載っているソースのどこを弄れば自分の使ったツリーメニューに対応させられるのかわかりませんでした。 javascriptを切った状態では開いたまま表示させたいので、ツリーメニューのソースは以下を参考にさせていただきました。 http://blog.ptlabo.net/index.php?id=06100064 これを利用して「戻ってきた時ツリーメニューを開いた状態に」することはできますか？ できない場合、 ・cssオン、javascriptオフの状態では開いている ・ブラウザバックしたときに開いている この条件に合うツリーメニューであれば何でも良いのでお教えいただきたいです。 初心者ですので詳細にご教授いただければ幸いです。 よろしくお願いします。
- 締切済み
- JavaScript
- リンク先から他のページへ飛ぶことはできないでしょうか。
いつもお世話になります。 a.htmlの中でgetURL("#aaa");を含むswfファイルを表示します。 swfの該当箇所をクリックすることによりa.htmlのaaaへジャンプします。 しかし、このa.htmlが大きくなりすぎてa.htmlと、b.htmlに分けます。 リンク先aaaが、b.htmlになってしまったとき リンク先をgetURL("b.html#aaa");と書き直しswfをパブリッシュし直せばそれで済むことですが、a.htmlを書き直すだけでb.html#aaaへとばすことはできないものでしょうか。 jabascript、phpなど使用できます。 a.htmlに仮にリンク先aaaを設け、この箇所を工夫することでなんとかならないものかと考えてみましたがわかりません。 おわかりになる方見えましたらよろしくお願いいたします。
- 締切済み
- Flash
- ツリーメニューの作成
ツリーメニューの表示ができません。 記述は以下のとおりです （ヘッダー内） メタタグで標準スクリプト指定 <meta http-equiv="Content-Script-Style" content="text/javascript"> ツリーメニューの記述(某サイトよりコピペ） <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> ボディ内 （実際にツリーメニューを表示させる箇所） <A HREF="JavaScript:ok('tree1');"> ■メニュー </A> <div id="tree1" style="display:none;"> ツリー１<br> ツリー２<br> ツリー３<br> </div> ///////////////////////////////////////////////////////////// こんな感じです。 以前別のＨＴＭＬファイルで、ツリーメニューをつくったときには 正常に表示（クリックすると、ずらずらと出てくる）のに、今回同じソース（というのですか？）で記述してみたら、ダメでした。 「このページは表示できません」とかなります。
- 締切済み
- その他（インターネット・Webサービス）
- メニューをすべて展開orすべて折りたたむ をするには
メニューをすべて展開orすべて折りたたむ をするには http://okwave.jp/qa/q4482305.html で回答されたコードを利用して、ツリーメニューを作成しています。 これに1行つけくわえて「全て展開」「全て折りたたむ」というメニューを付け加えられないでしょうか。 どなたか回答よろしくお願いいたします。
- ベストアンサー
- JavaScript
- ツリー型メニューの作成
オンマウスやクリックで展開するツリー型のメニューを作成したいと思っています。それほど複雑なものは必要としませんが、CGIやjavascriptを少し書き換える程度の知識しかありません。テンプレートのようなものを使っても、実際にやるとなると微調整など必要になるため、難しいかとも思いますが、チャレンジしたいと思います。参考になるサイトやプログラムを教えてください。
- ベストアンサー
- JavaScript
- ツリーを生成できるライブラリが欲しい
Web上でカテゴリ毎にツリー上に表示したいと思っていますが、 思ったように動作してくれるライブラリが見当たりません。 やりたいことは以下のようなことです。 ・ツリー上に項目の表示。 ・ツリーの各項目をクリックすることでリンクを辿る。 ・ツリーが展開されている際に、最下層項目以外をクリックした場合、 ツリーを閉じない。（展開されたまま） ・画面表示時に、画面に応じた項目のツリーを展開したい。 イメージとしてはじゃんぬねっとさんの所のツリーと同じです。 http://jeanne.wankuma.com/tips/csharp/validation/isnumeric.html これらを実現できるライブラリはありませんでしょうか？
- ベストアンサー
- JavaScript
- リンク先を隠す方法はないでしょうか？
たとえば、リンク先が http://hoge.com/hoge.htm だとしたらアドレス（URL）欄に http://aaa.com/hoge.php？aaa （aaa.comはリンク元） とかいう表示がされるような方法はないでしょうか？ java perl php はもちろん何でもかまいません。 フレームは除きます。 初心者なのでなるべく簡単な方法がありがたいです。
- ベストアンサー
- PHP
お礼
返信が遅くなりすみません。 参考にさせていただきます。 ありがとうございました。