HTML中树的实现方法

2016-02-19 20:35 437 1 收藏

下面是个简单易学的HTML中树的实现方法教程,图老师小编详细图解介绍包你轻松学会,喜欢的朋友赶紧get起来吧!

【 tulaoshi.com - Web开发 】

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

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

  下面是实现树的静态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
  titleCurrent 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"
   lia href="a.htm"Section 1/a/li
   lia href=""Section 2/a
    ul
     lia href=""Section 2.1/a/li
     lia href=""Section 2.2/a/li
     lia href=""Section 2.3/a
      ul id="navcurrentsection"
       lia href=""Section 2.3.1/a/li
       lia href=""Section 2.3.2/a/li       
      /ul
     /li
     lia href=""Section 2.4/a/li 

   /ul
   /li
   lia 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);
}

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

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

来源:https://www.tulaoshi.com/n/20160219/1624046.html

延伸阅读
#include stdio.h #include stdlib.h #include string.h #include conio.h typedef struct { unsigned int Weight; unsigned int Parent; unsigned int lChild; unsigned int rChild; }HTNode,*HuffmanTree; typedef char **HuffmanCode; int LookFor(char *str,char letter,int count); void OutputWeight(char *Data,in...
标签: Web开发
第一步:在开始之前我们需要准备这么一个js文件,代码如下。我姑且将它命名为tree.js。 代码如下: function Node(id, pid, name, url, title, target, icon, iconOpen, open, appendedStr) {     this.id = id;     this.pid = pid;     this.name = name;   &nbs...
1.在ORACLE中实现SELECT TOP N    由于ORACLE不支持SELECT TOP语句,所以在ORACLE中经常是用ORDER BY跟ROWNUM的组合来实现SELECT TOP N的查询。   简单地说,实现方法如下所示:   SELECT 列名1...列名n FROM     (SELECT 列名1...列名n FROM 表名 ORDER BY 列名1...列名n) &...
一、在drawable下面添加xml文件rounded_editview.xml 代码如下: ?xml version="1.0" encoding="utf-8"? shape xmlns:android="http://schemas.android.com/apk/res/android"     android:shape="rectangle"     solid android:color="#FFFFFF"/solid     padding android:left="10dp"  ...
标签: Web开发
前面两篇讲解了解析Html的思想个核心算法,感谢各位提出了意见。先专门列出一文作为解释: 1、ViewStates提到,“TD 阿道夫骄傲了沙发/TD”怎么办?这个是可以解析出来的,其中解析后节点名为“td”,而“ 阿道夫骄傲了沙发/TD”解析成了属性。 如图: 上面的图中,包含了上面提到的例子。 回复ml_dark兄 象这...

经验教程

142

收藏

84
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部