如何用HTML做树状的目录

可以通过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>

给你写个例程看看，都可以自由发挥的呵呵

前台

就是一个treeview：

<asp:TreeView ID="dsPipeLine" runat="server" ShowLines="True"

BorderColor="#3399FF" Font-Size="9pt">

</asp:TreeView>

后台给treeview填充数据：

/// <summary>

/// 生成父节点

/// </summary>

public void getPipeLine()

{

DataSet dsbd = dpbudings.GetList("")//生成DataSet，自己生成一个表也行。

if ( dsbd .Tables[0].Rows.Count >0)

{

TreeNode tnTop

DataRow [] drs=dsbd .Tables[0].Select("")

for (int i = 0i <drs.Lengthi++)

{

tnTop = new TreeNode()

tnTop.Value = drs[i]["id"].ToString()

tnTop.Text = drs[i]["name"].ToString()

//tnTop.ShowCheckBox = true//是否在节点前显示chekbox

tvPipeLine.Nodes.Add(getTree(tnTop, dsbd.Tables[0], drs[i]["id"].ToString()))

}

}

tvPipeLine.CollapseAll()//关闭所有节点

}

/// <summary>

/// 生成子节点

/// </summary>

/// <param name="tn"></param>

/// <param name="dt"></param>

/// <param name="topid"></param>

protected TreeNode getTree(TreeNode tnTop,DataTable dt,string topid)

{

DataRow[] drs = dt.Select(" cid="+topid+"")

TreeNode tn

for (int i = 0i <drs.Lengthi++)

{

tn = new TreeNode()

tn.Value = drs[i]["bid"].ToString()

tn.Text = drs[i]["name"].ToString()

tn.ShowCheckBox = true

tnTop.ChildNodes.Add(getTree(tn, dt, drs[i]["bid"].ToString()))

}

return tnTop

}

以上就能实现一个简单的树，其他的自由发挥即可。

其实前台后台一样的，如果不考虑其他因素

你完全可以把treeview从后后wright到前台，代码可以都在后台的。

还有就是网上又很多在前台用js写的树空间，功能也很齐全，你可以到网上down一个看看，很多的，这里就不说了先呵呵。

<br><SPAN><IMG id="Image_Closed" style="DISPLAY: none" onclick="this.style.display='none'

Text_Closed.style.display='inline'

Image_Open.style.display='inline'

Text_Open.style.display='inline'"

src="pic/m_o.gif"><IMG id="Image_Open<%= i %>" onclick="this.style.display='none'

Image_Closed.style.display='inline'

Text_Open.style.display='none'

Text_Closed.style.display='inline'"

src="pic/m_c.gif"></SPAN>

<SPAN id="Text_Closed">大目录

<SPAN id="Text_Open" style="DISPLAY: none">'主要是这句话进行修改下

<SPAN>

<br> <IMG src="pic/m_c.gif" />小目录<br>

</SPAN>

</SPAN>

</SPAN>

---