如何用HTML做树状的目录

html-css06

如何用HTML做树状的目录,第1张

可以通过jQuery的treeview插件实现，基本实现代码如下：

<link rel="stylesheet" href="../jquery.treeview.css" type="text/css" />

<script src="../js/jquery.js"></script>

<script type="text/javascript" src="../js/jquery.treeview.js"></script>

<script src="../js/jquery.cookie.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function(){

$("#red").treeview({

animated: "fast",

collapsed: true,

unique: true,

toggle: function() {

window.console &&console.log("%o was toggled", this)

}

})

})

</script>

html如下：

<ul id="red">

<li class="open"><span>北京市</span>

<ul>

<li class="open"><span>西城区</span>

<ul>

<li class="open"><span>西直门</span>

<ul>

<li><span>西环广场</span></li>

</ul>

</li>

<li><span>马甸</span>

<ul>

<li><span>浙江大厦</span></li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

1、打开文件资源管理器

2、在文件资源管理器中进入到某个文件夹或者文件，然后再左边栏空白的地方点击右键，然后选择“展开到当前文件夹”

3、查看文件夹的树形目录

4、在“查看”tab中，把“展开到当前文件夹”的选项勾上

是不是因为你背景的URL用了相对本地磁盘的路径？如果是用drewmweaver做的页面，建议你在右边“文件”树型目录这里建立一个站点，把站点路径设置为你当前开发的这个站的目录，然后再去写CSS。这样背景URL这里就DW就会自动转为相对路径。那么在预览的时候就不会有问题了。

还有第一行的@charset "utf-8"看起来好象是设置UTF-8编码，但是，我好象从来没见过类似的定义，我做UTF-8页面的CSS从来没用过这个。也可能是这里出了问题。去掉试一下吧。

-------

图片演示那里点管理站点。添加一个。

不添也行，如果是外联的css，那么url后面的路径设置成相对css文件所在目录就可以了。如果内联的，设置成该页面文件相对的路径。