HTML中树的实现方法

原创 2003年06月01日 23:02:00

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

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

jquery+css实现html选择树或树形菜单

本文将介绍利用jquery+css实现html选择树或树形菜单的方法,无需其他插件,十分简洁明了。 主要利用标签加上样式调整。 先上效果图: 下面上CSS代码: li{ ...
  • listmana
  • listmana
  • 2016年09月03日 15:20
  • 8692

html横向树目录

html横向树目录
  • wxb514438525
  • wxb514438525
  • 2015年11月07日 00:42
  • 934

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

利用javascirpt我们可以很容易的在 HTML中实现树,而不需要使用ASP,JSP,PHP等等编写动态程序,当然如果要和数据库结合,下面的代码也很容易移植。   利用javascirpt我们可...
  • gjpdeyx
  • gjpdeyx
  • 2010年06月25日 16:57
  • 244

webkit中 html的解析及dom树和render树的生成

1.webkit中每个html页面对应于一颗dom树 和render树,dom用于描述html页面的的信息,而render树则用于布局,具体负责dom树如何显示在屏幕上,从MVC的角度来说,可以将re...
  • wangjie5540
  • wangjie5540
  • 2014年09月15日 15:18
  • 830

深入学习Html DOM树的操作

本文向大家简单介绍一下HTML DOM树的概念,我们必须要对DOM模型有一定的认识,才能把Javascript应用于WEB,或你的RIA应用当中,因为 DHTML本质上就是操作DOM树。 AD:...
  • u014683605
  • u014683605
  • 2015年07月30日 10:35
  • 881

HTML页面树型结构的实现-xyTree V4.1

 APIcss   不用管它,这是API.html的css样式userImages   里面有一些图片,是用来展示如何自定义图片的xyTree   重要,如想使用这个树,只需把xyTree这个文件夹拷...
  • xieye114
  • xieye114
  • 2007年06月23日 09:47
  • 1993

jQuery遍历dom树(5)

什么是遍历? jQuery 遍历,意为“移动”,用于根据其相对于其他元素的关系来“查找”(或选取)HTML 元素。以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止。 下图展示了一个家族树。...
  • u011518709
  • u011518709
  • 2013年09月06日 13:04
  • 1534

普通树在线性内存中存储表示方法

想把树类型结构的非线性数据存储到计算机的线性存储,就发明了以下几种表示方法: 一.双亲孩子法     总结:用数组实现,如下范例 /**********************************...
  • jadeshu
  • jadeshu
  • 2016年12月13日 00:45
  • 478

如何用栈实现递归与非递归的转换(一)三种遍历树的算法

递归与非递归转换的基础知识是能够正确理解三种树的遍历方法:前序,中序和后序,第一篇就是关于这三种遍历方法的递归和非递归算法。 如何用栈实现递归与非递归的转换(一)三种遍历树的算法 ...
  • coloriy
  • coloriy
  • 2015年09月07日 13:19
  • 1021

解析Html生成标签树(前言)

提示:根据这几天的访问量跟踪,我发现很多访者都没有很好地关注到真正进行算法描述的章节《解析Html生成标签树(一)》,特此进行提示。搜索引擎一个最重要的步骤就是,获得网页的正文内容,我相信每个人看见一...
  • RonoTian
  • RonoTian
  • 2008年06月03日 18:31
  • 9448
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML中树的实现方法
举报原因:
原因补充:

(最多只允许输入30个字)