利用javascirpt我们可以很容易的在HTML中实现树，内容来自站长资讯网(www.ningmop.com)而不需要使用ASP,JSP,PHP等等编写动态程序，当然如果要和数据库结合，下面的代码也很容易移植。
首先，我们看一下实现这个树形结构的javascript代码。
common.js
| 以下是引用片段： <!-- function showCurrentSection() { var objCurrentSection = document.getElementById("navcurrentsection"); if (objCurrentSection != null) { objCurrentSection.style.display = "block"; objCurrentSection.parentElement.childNodes[0].className = "open"; if (objCurrentSection.parentElement.parentElement.nodeName == "UL") showSection(objCurrentSection.parentElement.parentElement); } } function showSection(objSection) { objSection.style.display = "block"; objSection.parentElement.childNodes[0].className = "open"; if (objSection.parentElement.parentElement != null && objSection.parentElement.parentElement.nodeName == "UL") showSection(objSection.parentElement.parentElement); } --> |
下面是实现树的静态HTML文件，内容来自站长资讯网(www.ningmop.com)很简单的啊。
example1.html
| 以下是引用片段： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Current Tree Node Opener</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" href="tree.css" type="text/css" media="screen" /> <meta http-equiv="expires" content="-1" /> <meta http-equiv="pragma" content="no-cache" /> <meta name="robots" content="none" /> <meta name="rating" content="all" /> <meta name="author" content="Bluegrass Technologies" /> <meta name="email" content="paulw@bluegrassgroup.com" /> <script language="javascript" type="text/javascript" src="common.js"></script> </head> <body onload="showCurrentSection();"> <ul id="menu"> <li><a href="a.htm">Section 1</a></li> <li><a href="">Section 2</a> <ul> <li><a href="">Section 2.1</a></li> <li><a href="">Section 2.2</a></li> <li><a href="">Section 2.3</a> <ul id="navcurrentsection"> <li><a href="">Section 2.3.1</a></li> <li><a href="">Section 2.3.2</a></li> </ul> </li> <li><a href="">Section 2.4</a></li> </ul> </li> <li><a href="">Section 3</a></li> </ul> </body> </html> 下面是树的样式表 tree.css body { font-family: Verdana, Arial, Sans-Serif; font-size: small; background-color: #ffffff; } ul#menu { border: solid 1px #333333; border-top-width: 15px; padding: 10px; padding-top: 6px; margin: 0px; width: 200px; } ul#menu li { margin: 0px; list-style-type: none; border: solid 1px #ffffff; } ul#menu li ul { margin: 0px 0px 0px 15px; display: none; } ul#menu li a { background-image: url(closed.gif); background-repeat: no-repeat; background-position: 0px 4px; text-indent: 15px; display: block; text-decoration: none; color: #333333; } ul#menu li a:hover { color: #000000; background-color: #eeeeee; background-image: url(open.gif); } |
好了，到这里为止，内容来自站长资讯网(www.ningmop.com)我们已经实现了这个树，大家不妨亲自演示一下。
发表回复