如何用HTML做树状的目录

如何用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>

<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>

<HTML><HEAD>

<META http-equiv=Content-Type content="text/htmlcharset=gb2312">

<SCRIPT language=javascript>

function showmenu(menuid)

{

if(menuid.style.display=="none"){

menuid.style.display=""

} else {

menuid.style.display="none"

}

}

</SCRIPT>

<META content="MSHTML 6.00.2800.1106" name=GENERATOR></HEAD>

<BODY>

<TABLE cellSpacing=0 cellPadding=0 width=171 align=center border=0>

<TR>

<TD language=javascript onmouseup=showmenu(menuid1)>江苏</TD></TR>

<TR>

<TD id=menuid1 style="DISPLAY: none" bgColor=#fefdf5>南京<BR>

无锡<BR>

徐州<BR>

</td>

<TR>

<TD language=javascript onmouseup=showmenu(menuid2)>山东</TD></TR>

<TR>

<TD id=menuid2 style="DISPLAY: none" bgColor=#fefdf5>

济南<br>

青岛<br>

</td>

</tr>

</TABLE>

</HTML>

把这些代码复制过去存为一个html文件


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zaji/7024095.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-31
下一篇 2023-03-31

发表评论

登录后才能评论

评论列表(0条)

保存