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

yibin 2015-02-09 建站源码 653

  利用javascirpt我们可以很容易的在HTML中实现树,内容来自站长资讯(www.nhstu.com)而不需要使用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文件,内容来自站长资讯网(www.nhstu.com)很简单的啊。

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

  好了,到这里为止,内容来自站长资讯网(www.nhstu.com)我们已经实现了这个树,大家不妨亲自演示一下。

扫码添加微信

13013082126 扫描微信 建站咨询 优化咨询