知识屋:更实用的电脑技术知识网站
所在位置:首页 > 编程技术 > HTML教程

网页特效之HTML中树的实现方法

发布时间:2011-07-14 20:23:11作者:知识屋

 

利用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> 
  <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="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"> 
   <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> 
下面是树的样式表 
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); 
}

 

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

(免责声明:文章内容如涉及作品内容、版权和其它问题,请及时与我们联系,我们将在第一时间删除内容,文章内容仅供参考)
收藏
  • 人气文章
  • 最新文章
  • 下载排行榜
  • 热门排行榜