HTML中树的实现方法

王朝html/css/js·作者佚名  2006-01-08
窄屏简体版  字體: |||超大  

利用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);

}

好了,到这里为止,我们已经实现了这个树,大家不妨亲自演示一下。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有  導航