HTML中樹的實現方法 (轉)

HTML中樹的實現方法 (轉)[@more@]

利用scirpt我們可以很容易的在HTML中實現樹，而不需要使用,,等等編寫動態，當然如果要和結合，下面的程式碼也很容易移植。

首先，我們看一下實現這個樹形結構的程式碼。

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

ns="" xml:lang="en" lang="en">
 

  
 
  
 
 
 
 
 
  
 
 
 
 

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

好了，到這裡為止，我們已經實現了這個樹，大家不妨親自演示一下。