HTML中树的实现方法

最新推荐文章于 2022-06-24 11:02:10 发布

zzc1684

最新推荐文章于 2022-06-24 11:02:10 发布

阅读量311

点赞数

分类专栏： Html 文章标签： xhtml javascript ViewUI

本文链接：https://blog.csdn.net/zzc1684/article/details/84041727

版权

Html 专栏收录该内容

46 篇文章 0 订阅

订阅专栏

<!-- 
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 οnlοad="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); 
}

zzc1684

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML中树的实现方法

&lt;!-- function showCurrentSection() { var objCurrentSection = document.getElementById("navcurrentsection"); if (objCurrentSection != null) { objCurrentSection.style.display = "b...
复制链接

扫一扫