サイト内検索

...JavaScript...

JavaScript・サンプル

ツリーメニュー

ソース

[headの中]

<style type="text/css">
<!--
.tree {line-height: 20px;}
.tree a {text-decoration: none; color: #000080;}
.tree a:hover {color: red;}
-->
</style>
<script type="text/javascript">
<!--
function init() {
if (!document.getElementsByTagName) {return; }
var objs = document.getElementsByTagName("div");
for (i = 0; i < objs.length; i++) {
if (objs[i].className == "titem") {
objs[i].style.display = "none";
}
}
}
function func(id) {
if (!document.getElementsByTagName) {return false; }

var obj = document.getElementById(id);
if (obj.style.display == "block") {
obj.style.display = "none";
} else {
obj.style.display = "block";
}
return false;
}
// -->
</script>

[bodyの中]

<body onload="init()">
<table width="200" summary="サンプル">
<tr>
<td>
<div class="tree">
<div>
<a href="#" onclick="return func('hp')">・HTML・XHTMLmemo</a>
</div>
<div class="titem" id="hp">
<div>├<a href="#" onclick="return func('hp-01')">*テキスト</a></div>
<div class="titem" id="hp-01">
<div>│├<a href="../hp/moji.htm">○文字のサイズ</a></div>
<div>│├<a href="../hp/danraku.htm">○段落</a></div>
<div>│└<a href="../hp/midasi.htm">○見出し</a></div>
</div>
<div>├<a href="#" onclick="return func('hp-02')">*画像</a></div>
<div class="titem" id="hp-02">
<div>│├<a href="../hp/size.htm">○サイズ</a></div>
<div>│├<a href="../hp/border.htm">○枠線</a></div>
<div>│└<a href="../hp/setumei.htm">○説明文</a></div>
</div>
<div>├<a href="rink.htm">*リンク</a></div>
<div>└<a href="frame.htm">*フレーム</a></div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="tree">
<div>├<a href="#" onclick="return func('st')">・スタイルmemo</a></div>
<div class="titem" id="st">
<div>│├<a href="../st/box.htm">*ボックス</a></div>
<div>│├<a href="../st/table.htm">*テーブル</a></div>
<div>│├<a href="../st/list.htm">*リスト</a></div>
<div>│└<a href="../st/cell.htm">*セル</a></div>
</div>
</div>
</td>
</tr>
</table>

ブラウザ上


Copyright c 2007.10.01 luc All rights reserved.