HTML中树的实现方法 -

zzc1684

浏览: 1226001 次
性别:
来自: 广州

最近访客更多访客>>

songronghu

atianchen

gol

ytleon

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

HTML中树的实现方法

博客分类：

Html

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

<!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="xx" /> 
  <meta name="email" content="xx@xx.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>

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

分享到：

Html中tab的实现(3种类型) | struts2.1.6+hibernate3.3+spring3.0遇到的 ...

2011-09-30 10:33
浏览 1000
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML中树的实现方法

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML中树的实现方法

评论

发表评论

相关推荐

Sublime 插件- px 转rem；Atom 编辑器插件: px2rem-plus

前端工程师需要明白的「像素」

淘宝flexible.js漏洞修补

电脑端预览手机版页面

flexible.js

Flex 布局教程

移动端弹出层加遮罩后禁止滑动

易百教程

已测试-幻灯滑动+滚动列表

iscroll4升级到iscroll5全攻略笔记 (博主已改行，不再更新）

IScroll5实现下拉刷新上拉加载更

iscroll5 上下拉动刷新

html页面滚动到最底部时，无限滚动

简约时尚的纯CSS3 Tabs选项卡特效

JS组件系列——表格组件神器：bootstrap table

Bootstrap可编辑表格

HTML5中的Range对象的研究

js createRange与createTextRange的一些用法实例

JS Range HTML文档/文字内容选中、库及应用介绍

JavaScript中textRange对象使用方法小结

最近访客更多访客>>