• ベストアンサー

Javascriptでツリー表示(メニュー・FAQ等)の方法を教えて!goo

はじめまして、現在ホームページを制作しているのですが、Javascriptを利用したツリー表示の方法がわかりません。http://html-time.com/time/hover_source2.htm内の『サンプル表示』をクリックした時に表示・非表示を切り替える方法を教えてください!よろしくお願いします!!

質問者が選んだベストアンサー

  • ベストアンサー
  • kaiu
  • ベストアンサー率20% (65/315)
回答No.1

こちら参考になると思います。 頑張ってください。 ■基本の考え方 http://egis-s.hp.infoseek.co.jp/garakuta/showhide.html ■実際のソース http://www3.ocn.ne.jp/~motiya/java/sample-2/list_menu.htm

oshiete23
質問者

お礼

kaiu様 早速のご教授ありがとうございます、こんなに早くレスをいただけるとは…。 参考サイトも非常にわかりやすく、すぐに応用できました。 当方初心者のため、まだまだわからない部分がたくさん出てくると思います。 また、投稿させていただきますので、今後ともよろしくお願いいたします。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • Javascriptでのツリーメニュー表示について

    Javascriptを利用して、ホームページ上でツリーメニューを表示させようと思っています。 以下のページのサンプルを元にしています。 【解説ページ】http://www.openspc2.org/reibun/javascript/mouse/063/index.html 上記は、1ページ毎に記述するタイプでテキストベースとなっております。 私は、はじめにツリーを展開するボタンをgif画像で作成し、それをクリックした際に画像の下にテキストベースのリンク文字が表示されるようにしたいと考えました。 また、それらは外部のjsファイルでの管理をしたいと思います。 まず、下記の構文を外部jsファイルで作成し<head>内でファイルの読み込みを行いました。 【↓clickmenu.js↓】 function exMenu(tName) { tMenu = document.getElementById(tName).style; if (tMenu.display == 'none') tMenu.display = "block"; else tMenu.display = "none"; } 次に、下記のタグの部分も外部jsファイルで読み込みたいと思っています。 <a href="javaScript:exMenu('treeMenu1')">+</a>■検索サイト<br>~</div>まで この実際のボタン部分も外部jsで読み込みたいと思う理由は、ページ数が非常に多く、メニューの追加や削除を、1つのファイルでどうしても管理したいからです。 フレームを利用せず、Javascriptでも同じ事が可能であることはわかったのですが、タグの部分がうまく外部ファイルにできなくて、表示が真っ白になってしまいます。 document.write('<a href="javaScript:exMenu('treeMenu1')">+</a>■検索サイト<br>'); のように、1行ずつ書いているのですが、hrefにjavaScriptを指定すると表示が消えてしまいます。 必ずこの型でというわけではないのですが、何とかうまく外部ファイルでボタン部分を表示させる方法がありませんでしょうか。ご教授願います。

  • 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に詳しいかた見てください。

    以下のサイトのツリーを見てください。 http://www3.ocn.ne.jp/~manna/youyaku.html 8月をクリックしてから10月をクリックすると、両方が表示されます。 どちらか一方をクリックして残す方法。 8月をクリックした後、10月をクリックしたら8月のツリーが閉じて、 10月のツリーメニューだけが表示させるようにするのは可能でしょうか?

  • HPでツリー表示:初期状態で全閉にするには?

    現在ホームページを作成しておりまして、ツリーを使いたいと考えています。 とほほのWWW入門というサイト様のページより、ツリー表示のさせかたのソースを借りて書いていたのですが、なぜかオンラインにあげると初期の状態ですべてのサブカテゴリが表示されてしまいます。 オフラインで見ると閉じているのですが… 解決策はありますでしょうか? 参照ページ:とほほのWWW入門(ツリー表示) http://www.tohoho-web.com/how2/tec2.htm#treeMenu

    • ベストアンサー
    • HTML
  • ツリーメニューについて

    私はクリックすると下に文字が出るツリーメニューを使ったのですが クリックすると下に文字が出、かつフレームで二分割した右側に他のページを表示させる方法が知りたいです。 拙い説明で申し訳ありません。 HTMLタグは大体は理解していると思います。javascriptはまだよく分かっていません。 ツリーメニューも付け焼刃で使っています。 なので、参考にできそうなサイト様をお教えいただくか もしくは細かく説明していただけるとありがたいです。 サイトのURL:http://artclub.ojaru.jp/frame.html よろしくお願いします。

  • ツリーメニューについて質問です。

    ツリーメニューについて質問です。 いくつかのサイトを参考にし、コピー&ペーストでjavascriptを使ってツリーメニューを作成したのですが、ツリーメニューが展開された状態で表示されてしまいます。 閉じた状態で表示したいのですが、どうすればいいでしょうか。 ここにソースを載せようと思いましたが入りませんでしたので、載せられません。 主に参考にしたのは、このサイトです。 http://himajin.moo.jp/java/menu2.html このサイトのものに何を足せば良い、とかそのようなソースが載っているサイトがもしあれば教えてほしいです。 よろしくお願いします。 ちなみに私は超初心者です><

  • 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

  • ツリーメニューの作成

    ツリーメニューの表示ができません。 記述は以下のとおりです (ヘッダー内) メタタグで標準スクリプト指定 <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;"> ツリー1<br> ツリー2<br> ツリー3<br> </div> ///////////////////////////////////////////////////////////// こんな感じです。 以前別のHTMLファイルで、ツリーメニューをつくったときには 正常に表示(クリックすると、ずらずらと出てくる)のに、今回同じソース(というのですか?)で記述してみたら、ダメでした。 「このページは表示できません」とかなります。

  • 戻ってきた時ツリーメニューが開いているようにクッキーを保存させたい

    タイトルの通り、開いたツリーメニューからリンクを踏んで、またメニューのあるページに戻ってきた時にメニューを開いたままにしたいです。 色々と調べるうちにcookieを使うことはわかったのですが、どこもツリーメニューの方法が違うため載っているソースのどこを弄れば自分の使ったツリーメニューに対応させられるのかわかりませんでした。 javascriptを切った状態では開いたまま表示させたいので、ツリーメニューのソースは以下を参考にさせていただきました。 http://blog.ptlabo.net/index.php?id=06100064 これを利用して「戻ってきた時ツリーメニューを開いた状態に」することはできますか? できない場合、 ・cssオン、javascriptオフの状態では開いている ・ブラウザバックしたときに開いている この条件に合うツリーメニューであれば何でも良いのでお教えいただきたいです。 初心者ですので詳細にご教授いただければ幸いです。 よろしくお願いします。

  • javascriptでなめらかなプルダウンメニューを

    javascriptを使ってFlashで作成したようななめらかな動きをするプルダウンメニューを 作成するのは出来るのでしょうか。 色々と調べてはいるのですが、下記サイトのサンプルのように クリックして直ぐにサブメニューが表示される、という方法は見つけられても 滑らかな動きを実現できる方法が見つかりません。 http://javascript.eweb-design.com/sample/s0701_1.html イメージとしては、 1.メニューをクリック 2.1秒後に上からズルズルっとサブメニューが表示される 3.メニューからマウスが離す 4.1秒後にズルズルっとサブメニューが上に戻る うまい表現方法が見つからず分りづらい質問となってしまいましたが アドバイスをいただけると助かります。宜しくお願いします。

このQ&Aのポイント
  • LIFEBOOK AH53でWindows11を使用して写真をDVD-Rに焼く手順について教えてください。
  • Windows11を搭載したLIFEBOOK AH53で写真をDVD-Rに保存する方法を教えてください。
  • LIFEBOOK AH53での写真のバックアップ方法について教えてください。
回答を見る