【参加讨论】 利用javascirpt我们可以很容易的在html中实现树，而不需要使用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文件，很简单的啊。
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);
} |
当前位置：首页>>网页设计>>html/css>>正文 
易特网络技术