相关文章
企通互联为你的网页做出电影的过场效果
北京网页设计HTML之影像地图
网站制作CSS：background-position的妙用
网站建设用Dreamweaver8制作网页中常用的过度效果
网站设计Dreamweaver CS3新功能
网站设计去除 Dreamweaver MX 2004 表格宽度辅助
网站设计Flash 鼠标指针
北京网站制作Flash深入学习：全Flash网站制作剖析
北京网页设计Dreamweaver基础视频教程,共30集
网站设计如何在Dreamweaver中进行数据库连接
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置：首页 >> 网站制作 >> 北京网页设计北京网页设计HTML中树的实现方法
北京网页设计北京网页设计HTML中树的实现方法
作者： 北京网站建设 日期：2008-03-27 06:03:34 来源： http://www.qitongnet.com
利用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); 北京网站制作 } |
好了，到这里为止，我们已经实现了这个树，大家不妨亲自演示一下。