创建网页树状目录的详细教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gengchunxi2004/article/details/3927396

本文介绍了如何制作网页的树状目录。首先分析目录级别，然后设计CSS样式。接着，利用代码片段插入HTML，并将二级、三级目录的表格ID进行设定。通过在页面上设置`onload`事件隐藏各级目录，再为一级目录添加`onclick`事件来实现展开与折叠的效果，同时更新背景图片。按照这种方法，可以创建出交互式的树状菜单。

无论用什么制作网站时，都有可能要制作一个树状的目录。今天就把如何制作树状目录详细的介绍一下:

首先要分析一下自己的树状目录分为几级，如下图所示:

✪一级菜单

✪二级目录

✪三级目录

✪一级菜单

✪二级目录

✪三级目录

✪一级菜单

✪二级目录

✪三级目录

再者在分析css样式;

然后插入“代码片段”。代码片段是在右侧里面的。吧代码片段放在<script></script>中

接下来

把二级目录所在的表格ID设置为“a1”、“a2”、“a3”，三级目录所在的表格设置为“a11”、“a21”、“a31”.

然后在吧光标放在页面部位，在右侧的行为中添加“onload”事件。代码为:“a1.style.display='none'”、“a2.style.display='none'”、“a3.style.display='none'”、“a11.style.display='none'”、“a21.style.display='none'”、:“a31.style.display='none'”

然后把贯标放在一级菜单位置，然后在右侧的行为事件中添加“onclick”行为，代码为:“with (findobj('a1').style){diaplay=display==''?'none':''}”;with(findobj('a1').style){this.style.backgroundimage=diaplay!='none'?'url(image/left_bg.jpg)':'url(image/left_arrow.jpg)'}；”、“a2.style.display='none'”、“a3.style.display='none'”、“a11.style.display='none'”、“a21.style.display='none'”、:“a31.style.display='none'”

其他几个一级菜单事件同上面的方法一样。

按照这样的步骤就可以作出相应的树状菜单效果了.