Chinaunix首页 | 论坛 | 博客

IT技术渐积累db2fans.blog.chinaunix.net

首页　| 　博文目录　| 　关于我

cnljh

  • 博客访问： 1033292
  • 博文数量： 146
  • 博客积分： 3444
  • 博客等级： 中校
  • 技术积分： 1602
  • 用 户 组： 普通用户
  • 注册时间： 2009-01-21 15:18
文章分类

全部博文（146）

文章存档

2014年（9）

2013年（3）

2012年（6）

2011年（44）

2010年（38）

2009年（46）

我的朋友
最近访客
推荐博文
jquery创建树形目录

分类： jQuery

2013-06-14 17:28:39

运行效果如下：

代码如下，已做注释。

点击(此处)折叠或打开

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2.   
  3. "">
  4. <html>
  5. <head>
  6. <script src=""></script>
  7. <link rel="stylesheet"
  8.     href=""
  9.     type="text/css" />
  10. <link rel="stylesheet"
  11.     href=""
  12.     type="text/css" />
  13. <script type="text/javascript"
  14.     src=""></script>
  15. <script>
  16.     $(document).ready(function() {
  17.         //id一定要放在span中，不能放在ul或li中，否则会让一块的颜色都变掉，如果想要在点击事件中做其它事情，重写$("span").click(function()函数就可以了
  18.         //基本思想是，树形目录的每一个id都不一样，对应数据库中的条目id，点击后，先获取被点击元素的id，然后根据id做其它相应的处理
  19.         $("#example").treeview();
  20.         $("span").click(function() {
  21.             //$("span.now").css("background-color", "");
  22.             //下面两语配合css实现选中的当前项变蓝色，但是怎么让背景变色，而不是让字体变色呢？
  23.             //同时这两语还可以获取上一次点击的项和当前项id，以便对点击做进一步处理
  24.             $("span.current").removeClass("current");
  25.             $(this).addClass("current");

  27.         })

  29.     });
  30. </script>
  31. <style type="text/css">
  32. .filetree span.current {
  33.         color:blue;
  34.         background-color:green;
  35. }
  36. #outer {
  37.   width:300px;
  38.   
  39. border-style: solid;
  40. border-width: 1px


  43. }
  44. </style>

  46. </head>
  47. <body>
  48. <div id="outer">
  49.     <ul id="example" class="filetree">
  50.         <li><span id=1 class="folder">Folder 1</span>
  51.             <ul>
  52.                 <li><span id=1.1 class="file">Item 1.1</span></li>
  53.             </ul></li>
  54.         <li><span id=2 class="folder">Folder 2</span>
  55.             <ul>
  56.                 <li><span id=2.1 class="folder">Subfolder 2.1</span>
  57.                     <ul>
  58.                         <li><span id=2.1.1 class="file">File 2.1.1</span></li>
  59.                         <li><span id=2.1.2 class="file">File 2.1.2</span></li>
  60.                     </ul></li>
  61.                 <li><span id=2.2 class="file">File 2.2</span></li>
  62.             </ul></li>
  63.         <li class="closed"><span id=3 class="folder">Folder 3
  64.                 (closed at start)</span>
  65.             <ul>
  66.                 <li><span id=3.1 class="file">File 3.1</span></li>
  67.             </ul></li>
  68.         <li><span id=4 class="file">File 4</span></li>
  69.     </ul>
  70. </div>
  71. </body>
  72. </html>


阅读(4388) | 评论(0) | 转发(0) |
0

上一篇：postgresql的集群

下一篇：eclipse竖向选择功能

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6