- ベストアンサー
エクスプローラ風階層構造のhtml
こんにちは。 エクスプローラのような階層構造はHTMLで作れるのでしょうか？用途は目次です。大項目をクリックすると中項目が表示され、中項目をクリックすると小項目が表示されるようなものを作りたいと思っています。 HTMLでなくてもＯＫです。 教えて下さい。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
出来るだけ無駄を省いてみました。 動作としては、大項目をクリックするとdispという関数を呼び出し、小項目の「クラス」を「表示させるスタイル(ari)」に変更するといった感じです。 また、表示されている時には「非表示のスタイル(nashi)」に変更します。 evalメソッドを使うのがポイントです。 <html> <head> <title>Menu</title> <script language="JavaScript"> function disp(MenuName){ if(eval("document.all." + MenuName + ".className") == 'ari'){ eval("document.all." + MenuName + ".className = 'nashi'"); }else{ eval("document.all." + MenuName + ".className = 'ari'"); } } </script> <style> .ari{ display: block; } .nashi{ display: none; } </style> </head> <body> <a href="#" onclick="disp('A1')">A01</a><br> <div id="A1" class="nashi"> ├<a href="#">A0102</a><br> └<a href="#">A0102</a><br> </div> <a href="#" onclick="disp('B1')">B01</a><br> <div id="B1" class="nashi"> ├<a href="#">B0102</a><br> └<a href="#">B0102</a><br> </div> <a href="#" onclick="disp('C1')">C01</a><br> <div id="C1" class="nashi"> ├<a href="#">C0102</a><br> └<a href="#">C0102</a><br> </div> </body> </html>
その他の回答 (3)
こんにちは。 JavaScriptでできますよ。 ちょうど良さげなのあります。 ※ほんとはホームにリンクさせないといけないものなのですが、 どういうわけか、ホーム、今JavaScirptエラーが起こっていて、 きちんと動作してないみたいなので直リンクにします・・・。
- kumagoro-
- ベストアンサー率57% (36/63)
HTMLならばJavaScriptでスタイルのdisplayをblockやnoneにすることで表示、非表示を切り替えることが出来ます。 参考URLを見てみて下さい。
補足
ありがとうございます。 参考URLを見させていただきました。 まさに私が望む機能なんですが、ソースを理解できませんでした。すみません、スキルが低くて。。。。 ずうずうしいお願いですが、より具体的に教えていただきたく思います。 ＜例＞ ブラウザはＩＥ5.0以上が対象で A01の配下にA0101、A0102がある場合のソースについて教えてください。 A01 ｜ －A0102 ｜ －A0102 すみませんがよろしくご指導下さい。
- sinx
- ベストアンサー率29% (14/47)
参考URLのJavaScriptのサンプルプログラム-ハイパーリンクの 下の方にあるようなものでどうでしょう。
補足
ありがとうございます。 参考URLを見させていただきました。 まさに私が望む機能なんですが、ソースを理解できませんでした。すみません、スキルが低くて。。。。 ずうずうしいお願いですが、より具体的に教えていただきたく思います。 ＜例＞ ブラウザはＩＥ5.0以上が対象で A01の配下にA0101、A0102がある場合のソースについて教えてください。 A01 ｜ －A0102 ｜ －A0102 すみませんがよろしくご指導下さい。
補足
ありがとうございます。 参考URLを見させていただきました。 まさに私が望む機能なんですが、ソースを理解できませんでした。すみません、スキルが低くて。。。。 ずうずうしいお願いですが、より具体的に教えていただきたく思います。 ＜例＞ ブラウザはＩＥ5.0以上が対象で A01の配下にA0101、A0102がある場合のソースについて教えてください。 A01 ｜ －A0102 ｜ －A0102 すみませんがよろしくご指導下さい。