エクスプローラ風階層構造のhtml

解決済

質問者：superstar
質問日時：2002/05/24 18:11
回答数：4件

こんにちは。
エクスプローラのような階層構造はHTMLで作れるのでしょうか？用途は目次です。大項目をクリックすると中項目が表示され、中項目をクリックすると小項目が表示されるようなものを作りたいと思っています。
HTMLでなくてもＯＫです。
教えて下さい。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.4ベストアンサー

回答者： kumagoro-
回答日時：2002/05/27 19:45

出来るだけ無駄を省いてみました。

動作としては、大項目をクリックすると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>

- 0
- 件

通報する

No.3

回答者： noname#5841
回答日時：2002/05/25 17:26

こんにちは。

JavaScriptでできますよ。
ちょうど良さげなのあります。

※ほんとはホームにリンクさせないといけないものなのですが、
　どういうわけか、ホーム、今JavaScirptエラーが起こっていて、
　きちんと動作してないみたいなので直リンクにします・・・。

参考URL：http://www1.plala.or.jp/itoben/dhtml/pop/htm/fol …

この回答への補足

ありがとうございます。
参考URLを見させていただきました。
まさに私が望む機能なんですが、ソースを理解できませんでした。すみません、スキルが低くて。。。。
ずうずうしいお願いですが、より具体的に教えていただきたく思います。
＜例＞
ブラウザはＩＥ5.0以上が対象で
A01の配下にA0101、A0102がある場合のソースについて教えてください。
A01
　｜
　－A0102
　｜
　－A0102

すみませんがよろしくご指導下さい。

補足日時：2002/05/27 10:00

通報する