您的位置：首页 > Web前端 > JavaScript

纯JavaScript树型目录结构

2010-01-27 16:37 316 查看
javascript

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5 <meta content="古树,于恒良,www.gushu.net" />
6
7 <title>树型目录</title>
8 <style type="text/css">
9 <!--
10 html,body {height:100%;margin:0;font:12px tahoma,宋体,sans-serif;}
11 a {text-decoration:none;}
12 a,a:visited {color:#000;background:inherit;}
13

14 p {margin:0;padding:0 0 0 18px;}
15 p a,p a:visited {color:#00f;background:inherit;}
16
17
18 /*树型目录开始*/
19 .TreeMenu img.s {cursor:pointer;vertical-align:middle;}
20 .TreeMenu ul {padding:0;}
21 .TreeMenu li {list-style:none;padding:0;}
22 .Closed ul {display:none;}
23 .Child img.s {background:none;cursor:default;}
24
25 #TreeMenu {float:left;width:200px;height:98%;border:1px solid #99BEEF;background:#D2E4FC;color:inherit;margin:3px;padding:3px;}
26 #TreeMenu ul {margin:0 0 0 17px;}
27 #TreeMenu img.s {width:20px;height:20px;}
28 #TreeMenu .Opened img.s {background: url(bullet.gif); no-repeat 0 1px;}
29 #TreeMenu .Closed img.s {background: url(bullet.gif); no-repeat 0 1px;}
30 #TreeMenu .Child img.s {background: url(rt.gif);-repeat 13px 2px;}
31 /*树型目录结束*/
32
33 -->
34 </style>
35 <script type="text/javascript">
36 <!--
37 function Ob(o){
38 var o=document.getElementById(o)?document.getElementById(o):o;
39 return o;
40 }
41 function Hd(o) {
42 Ob(o).style.display="none";
43 }
44 function Sw(o) {
45 Ob(o).style.display="";
46 }
47 function ExCls(o,a,b,n){
48 var o=Ob(o);
49 for(i=0;i<n;i++) {o=o.parentNode;}
50 o.className=o.className==a?b:a;
51 }
52 function TreeMenu(id,TagName0) {
53 this.id=id;
54 this.TagName0=TagName0==""?"li":TagName0;
55 this.AllNodes = Ob(this.id).getElementsByTagName(TagName0);
56 this.InitCss = function (ClassName0,ClassName1,ClassName2,ImgUrl) {
57 this.ClassName0=ClassName0;
58 this.ClassName1=ClassName1;
59 this.ClassName2=ClassName2;
60 this.ImgUrl=ImgUrl || "TreeMenu_img/s.gif";
61 this.ImgBlankA ="<img src=\""+this.ImgUrl+"\" s\" ExCls(this,'"+ClassName0+"','"+ClassName1+"',1);\" alt=\"展开/折叠\" />";
62 this.ImgBlankB ="<img src=\""+this.ImgUrl+"\" s\" />";
63 for (i=0;i<this.AllNodes.length;i++ ) {
64 this.AllNodes[i].className==""?this.AllNodes[i].className=ClassName1:"";
65 this.AllNodes[i].innerHTML=(this.AllNodes[i].className==ClassName2?this.ImgBlankB:this.ImgBlankA)+this.AllNodes[i].innerHTML;
66 }
67 }
68 this.SetNodes = function (n) {
69 var sClsName=n==0?this.ClassName0:this.ClassName1;
70 for (i=0;i<this.AllNodes.length;i++ ) {
71 this.AllNodes[i].className==this.ClassName2?"":this.AllNodes[i].className=sClsName;
72 }
73 }
74 }
75 -->
76 </script>
77
78 </head>
79 <body>
80
81 <div >
82
83 <p><a href="#" AllClose');">全部展开</a><a href="#" AllOpen');" style="display:none;">全部折叠</a></p>
84
85 <ul>
86 <li ><a href="#" target="_blank">古树网站后台管理系统</a>
87 <!--目录节点开始-->
88 <ul>
89 <li><a href="#1">111</a>
90 <ul>
91 <li><a href="#2">222</a>
92 <ul>
93 <li ><a href="#">333</a></li>
94 <li ><a href="#">333</a></li>
95 <li ><a href="#">333</a></li>
96 <li ><a href="#">333</a></li>
97 <li ><a href="#">333</a></li>
98 <li ><a href="#">333</a></li>
99 <li ><a href="#">333</a></li>
100 </ul>
101 </li>
102 <li><a href="#">Web编程</a>
103 <ul>
104 <li ><a href="#">Java</a></li><!--Child Node-->
105 <li ><a href="#">.Net</a></li>
106 <li ><a href="#">ASP/VBScript</a></li>
107 <li ><a href="#">PHP</a></li>
108 <li ><a href="#">Perl/Python</a></li>
109 <li ><a href="#">Web综合/开源</a></li>
110 </ul>
111 </li>
112 </ul>
113 </li>
114 </ul>
115 <!--目录节点开始-->
116 </li>
117 </ul><ul>
118 <li ><a href="http://www.gushu.cn/" target="_blank">古树网站后台管理系统</a>
119 <!--目录节点开始-->
120 <ul>
121 <li><a href="#1">111</a>
122 <ul>
123 <li><a href="#2">222</a>
124 <ul>
125 <li ><a href="#">333</a></li>
126 <li ><a href="#">333</a></li>
127 <li ><a href="#">333</a></li>
128 <li ><a href="#">333</a></li>
129 <li ><a href="#">333</a></li>
130 <li ><a href="#">333</a></li>
131 <li ><a href="#">333</a></li>
132 </ul>
133 </li>
134 <li><a href="#">Web编程</a>
135 <ul>
136 <li ><a href="#">Java</a></li><!--Child Node-->
137 <li ><a href="#">.Net</a></li>
138 <li ><a href="#">ASP/VBScript</a></li>
139 <li ><a href="#">PHP</a></li>
140 <li ><a href="#">Perl/Python</a></li>
141 <li ><a href="#">Web综合/开源</a></li>
142 </ul>
143 </li>
144 </ul>
145 </li> <li><a href="#1">111</a>
146 <ul>
147 <li><a href="#2">222</a>
148 <ul>
149 <li ><a href="#">333</a></li>
150 <li ><a href="#">333</a></li>
151 <li ><a href="#">333</a></li>
152 <li ><a href="#">333</a></li>
153 <li ><a href="#">333</a></li>
154 <li ><a href="#">333</a></li>
155 <li ><a href="#">333</a></li>
156 </ul>
157 </li>
158 <li><a href="#">Web编程</a>
159 <ul>
160 <li ><a href="#">Java</a></li><!--Child Node-->
161 <li ><a href="#">.Net</a></li>
162 <li ><a href="#">ASP/VBScript</a></li>
163 <li ><a href="#">PHP</a></li>
164 <li ><a href="#">Perl/Python</a></li>
165 <li ><a href="#">Web综合/开源</a></li>
166 </ul>
167 </li>
168 </ul>
169 </li>
170 </ul>
171 <!--目录节点开始-->
172 </li>
173 </ul>
174 </div>
175 <script type="text/javascript">
176 <!--
177 var MyTreeMenu=new TreeMenu("TreeMenu","li");
178 MyTreeMenu.InitCss("Opened","Closed","Child","tr.gif");
179 -->
180 </script>
181 </body>
182 </html>
183
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航