HTML中树的兑现方法-HTML教程-爱易网页

HTML中树的兑现方法

日期：2014-05-17　浏览次数：20741 次

HTML中树的实现方法

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

<!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="xx" /> 
  <meta name="email" content="xx@xx.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>

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中树的兑现方法

相关资料更多>

推荐阅读更多>