HTML中树的实现方法 (转)

HTML中树的实现方法 (转)[@more@]

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

下面是实现树的静态HTML文件，很简单的啊。

example1.html

A href="tag-88-1.html">w3c//DTD xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XMLns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 

 Current Tree Node Opener 
 
  
 
 
 
 
 
 Mail" content=" paulw@bluegrassgroup.com" /> 
 
 
 
 

• 
   
• Section 1
   
• Section 2
   
  • 
     
  • Section 2.1
     
  • Section 2.2
     
  • Section 2.3
     
    • 
       
    • Section 2.3.1
       
    • Section 2.3.2 
       
    
     
     
  • Section 2.4
     
  
   
   
• Section 3 
   

 

下面是树的样式表

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);
}

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

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/10752019/viewspace-958292/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/10752019/viewspace-958292/