HTML中树的实现方法

【 tulaoshi.com - Web开发 】

　　利用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
  titleCurrent 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"
   lia href="a.htm"Section 1/a/li
   lia href=""Section 2/a
    ul
     lia href=""Section 2.1/a/li
     lia href=""Section 2.2/a/li
     lia href=""Section 2.3/a
      ul id="navcurrentsection"
       lia href=""Section 2.3.1/a/li
       lia href=""Section 2.3.2/a/li       
      /ul
     /li
     lia href=""Section 2.4/a/li 

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