相关文章
网站建设网页设计中CSS条状图表形式的实现方法
北京网站设计分享让不规则文章标题颜色和设置的颜色一样
网站制作Div+CSS布局入门教程(全)
北京网站制作采集系统新闻保存路径及扩展名的修改。
网站建设JS的调用教程
北京网站制作成功解决编辑器多个问题，自动增加代码，编辑死机问题
企通互联XHTML基础问答
网页设计详细介绍CSS的三种selector
北京网页设计Dreamweaver MX 2004 入门教程之界面详解（2）
网站建设用FrontPage 2000制作共享边框网页
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置：首页 >> 网站制作 >> www.qitongnet.com北京网站设计HTML中树的实现方法
www.qitongnet.com北京网站设计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 www.qitongnet.com网页设计 { 网站制作 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); 北京网站制作 } |
好了，到这里为止，我们已经实现了这个树，大家不妨亲自演示一下。 网页设计
