原创的基于HTML/CSS/JavaScript的层级目录树

　　上面示例的原代码如下，为了保持完整性，我没有将代码中德HTML、CSS、JavaScript分开，都放在一个文件里，若你引用我提供的层级目录树代码，请将三者合理放在不同的文件中。需要注意的是，您需要在目录树上配置链接地址。相信你熟悉HTML、CSS、JavaScript，应该知道如何对下面的代码进行改造。享受你的美好生活吧，感受网页开发可以如此简单！

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <meta name="author" content="心梦缘ocean ocl" />

  <title>My tree demo</title>

  <style type="text/css">

      /*主页面样式*/

      .leftNav {

        width: 20%;

        height:500px;

        border:#B9E0F7 1px solid;

        margin-left: 1%;

        margin-right: 1%;

    }

      #footer {

      color:#808080;

      line-height: 1.6em;

      padding: 0 0 1em 0;

    }

    /*我的树样式表*/

    .treeDiv {

      color: #636363;

      font-size: 14px;

      font-weight: normal;

      background-color: #fff;

      color: black;

      overflow: auto;

      padding: 0 0 1em 0;

      overflow-x: hidden;

    }

    .treeNode {

      white-space: nowrap;

      text-indent: -14px;

      margin: 6px 2px 5px 14px;

    }

    a.treeUnselected:hover, a.treeSelected:hover {

      background-color: #BFD9ED;

      text-decoration: none;

    }

    a.treeUnselected, a.treeSelected {

      color: black;

      padding: 1px 3px 1px 0;

      text-decoration: none;

    }

    a.treeSelected {

      background-color: #B9E0F7;

    }

    a.treeUnselected {

      background-color: transparent;

    }

    .treeSubnodes {

      display: block;

    }

    .treeSubnodesHidden {

      display: none;

    }

    .treeNode img.treeNoLinkImage, .treeNode img.treeLinkImage {

      height: 15px;

      margin-left: 5px;

      margin-right: 0px;

      width: 15px;

    }

    .treeNode img.treeLinkImage {

      cursor: pointer;

    }

    div.treeNode a, div.treeNode span.apiRoot {

      display: inline-block;

      margin-left: 24px;

      text-indent: 0;

      white-space: normal;

      width: 95%;

      word-wrap: break-word;

    }

    div.treeNode span.category {

      cursor: pointer;

    }

  </style>

</head>

<body>

<div class="leftNav">

    <div id="samplesToc">

        <div id="tree" style="top: 35px; left: 0px;" class="treeDiv">

          <div id="treeRoot" onselectstart="return false" ondragstart="return false">

            <div class="treeNode">

              <img src="../graphics/treenodeplus.gif" onclick="expandCollapse(this.parentNode)" class="treeLinkImage">

              <span onclick="expandCollapse(this.parentNode)" class="category">目录节点一 </span>

              <div class="treeSubnodesHidden">

                  <div class="treeNode">

                       <img src="../graphics/treenodeplus.gif" onclick="expandCollapse(this.parentNode)" class="treeLinkImage">

                       <span onclick="expandCollapse(this.parentNode)" class="category">目录节点一子目录 </span>

                       <div class="treeSubnodesHidden">

                           <div class="treeNode">

                              <a href="#" class="treeUnselected" onclick="clickAnchor(this)">二级叶子结点一</a>

                        </div>

                        <div class="treeNode">

                              <a href="#" class="treeUnselected" onclick="clickAnchor(this)">二级叶子结点二</a>

                        </div>

                    </div>

                  </div>

                <div class="treeNode">

                  <a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点一</a>

                </div>

                <div class="treeNode">

                  <a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点二</a>

                </div>

                <div class="treeNode">

                  <a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点三</a>

                </div>

                <div class="treeNode">

                  <a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点四</a>

                </div>

                <div class="treeNode">

                  <a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点五</a>

                </div>

                <div class="treeNode">

                  <a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点六</a>

                </div>

              </div>

            </div>

            <!--end block-->

            <div class="treeNode">

              <img src="../graphics/treenodeplus.gif" onclick="expandCollapse(this.parentNode)" class="treeLinkImage">

              <span onclick="expandCollapse(this.parentNode)" class="category">目录节点二</span>

              <div class="treeSubnodesHidden">

                <div class="treeNode">

                  <a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点一</a>

                </div>

                <div class="treeNode">

                  <a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点二</a>

                </div>

                <div class="treeNode">

                  <a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点三</a>

                </div>

                <div class="treeNode">

                  <a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点四</a>

                </div>

                <div class="treeNode">

                  <a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点五</a>

                </div>

              </div>

            </div>

            <!--end block-->

          </div>

        </div>

    </div> <!-- end samplesToc -->

</div> <!-- end leftNav -->

<div class="right content">

</div><!-- end main  content-->

<div id="footer" align="center">

</div><!-- end footer-->

<script type="text/javascript">

var treeSelected = null;//选中的树节点

var imgPlus = new Image();

imgPlus.src="../graphics/treenodeplus.gif";

var imgMinus = new Image();

imgMinus.src="../graphics/treenodeminus.gif";

//父节点展开事件

function expandCollapse(el)

{

    //如果父节点有字节点（class 属性为treeSubnodesHidden），展开所有子节点

    if (el.className!= "treeNode"){

        return;    //判断父节点是否为一个树节点，如果树节点不能展开，请检查是否节点的class属性是否为treeNode

    }

    var child;

    var imgEl;//图片子节点，在树展开时更换图片

    for(var i=0; i < el.childNodes.length; i++)

    {

        child = el.childNodes[i];

        if (child.src)

        {

            imgEl = child;

        }

        else if (child.className == "treeSubnodesHidden")

        {

            child.className = "treeSubnodes";//原来若隐藏，则展开

            imgEl.src = imgMinus.src;//更换图片

            break;

        }

        else if (child.className == "treeSubnodes")

        {

            child.className = "treeSubnodesHidden";//原来若展开，则隐藏

            imgEl.src = imgPlus.src;//更换图片

            break;

        }

    }

}

//子节点点击事件，设置选中节点的样式

function clickAnchor(el)

{

    selectNode(el.parentNode);

    el.blur();

}

function selectNode(el)

{

    if (treeSelected != null)

    {

        setSubNodeClass(treeSelected, 'A', 'treeUnselected');

    }

    setSubNodeClass(el, 'A', 'treeSelected');

    treeSelected = el;

}

function setSubNodeClass(el, nodeName, className)

{

    var child;

    for (var i=0; i < el.childNodes.length; i++)

    {

        child = el.childNodes[i];

        if (child.nodeName == nodeName)

        {

            child.className = className;

            break;

        }

    }

}

</script>

</body>

</html>

原创的基于HTML/CSS/JavaScript的层级目录树的更多相关文章

基于window自带功能生成目录树
在写文档时,生成目录树是非常有必要的,可以清晰明了地用图阐释一些事情. 1 生成目录树 1.1 方案1:操作繁(只显示文件夹) 1 - win + R 2 - 输入 “CMD” ,打开命令提示窗口“ ...
推荐20款基于 jQuery & CSS 的文本效果插件
jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...
基于类（Java）和基于原理（JavaScript）的对象系统的比较
Java:面向对象编程语言,吸收了C++语言的各种优点,丢掉了C++让人头疼的多继承.指针等概念.具有功能强大和简单易用的两大特征.Java具有简单性.面向对象.分布式.健壮性.安全性.平台独立与可移 ...
基于animation.css实现动画旋转特效
分享一款基于animation.css实现动画旋转特效.这是一款基于CSS3实现的酷炫的动画旋转特效代码.效果图如下: 在线预览源码下载实现的代码. html代码: <div class ...
Vim下的Web开发之html,CSS,javascript插件
Vim下的Web开发之html,CSS,javascript插件 HTML 下载HTML.zip 解压HTML.zip,然后将里面的所有文件copy到C:\Program Files\Vim\vi ...
学习css常用基本层级伪类属性选择器
常见的css选择器包含:常用选择器.基本选择器.层级选择器.伪类选择器.属性选择器,其中常用选择器分为:1.html选择符*{}//给页面上所有的标签设置模式:2.类选择符.hcls{}//给clas ...
购书网站前端实现（HTML+CSS+JavaScript）
购书+阅读静态网页设计与实现一.主页设计HTML 1.效果展示及实现 2.完整代码二.主页样式布局CSS 三.空间功能实现Javascript 主要功能 Javascript完整代码: 总结购书 ...
HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 02
工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 其实,我想使用表格,做一个这样的颜色表,如下图所示: 例 3:我们参照上图,基于上一个例子, ...
HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 04
工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 目前,我们已经将一些行和列插入到表格中,并设置单元格的背景颜色,显示 RGB 值等. 例 7 ...

随机推荐

iOS 多线程讲解
//同步操作用途 dispatch_queue_t queue = dispatch_get_global_queue(0, 0); dispatch_sync(queue, ^{ NSLog(@&q ...
Android 使用 HTTP 协议访问网络
正在看<第一行代码>,记录一下使用 HTTP 协议访问网络的内容吧! 在Android发送Http请求有两种方式,HttpURLConnection和HttpClient. 1.使用Htt ...
（搬运）《算法导论》习题解答 Chapter 22.1-1（入度和出度）
(搬运)<算法导论>习题解答 Chapter 22.1-1(入度和出度) 思路:遍历邻接列表即可; 伪代码: for u 属于 Vertex for v属于 Adj[u] outdegre ...
Oracle基础（八）数据完整性
一.数据完整性数据完整性要求数据库中的数据具有准确性.准确性是通过数据库表的设计和约束来实现的.为了实现数据完整性,数据库需要做两方面的工作: 确保每行的数据符合要求. 确保每列的数据符合要求. 为 ...
Codeforces Round #198 (Div. 1) B,C 动态规划
比赛时,开了大号去做,算了半天发现不会做A,囧.于是跑去看B,发现很水?于是很快敲完了,但是A不会,没敢交.于是去看C,一直找规律啊,后来总算调了出来,看了一下榜,发现还是算了吧,直接去睡觉了.第二天 ...
Javascript -- toFixed()函数
Javascript——toFiexed()函数 1. toFixed(n) 限制小数点后位数,四舍五入.n:0~20 . 2. 作用对象必须是number,不能为其他类型.如(8.001).toFi ...
nodejs4-模块和包
模块和包: 定义模块的方法跟sea.js类似,暴露一个接口也是使用exports. 调用一个接口就是使用require 注意:在引入模块的时候如果是同级目录需要加./,否则会报错除了可以使用ex ...
【CSS3】---块状元素、内联元素(又叫行内元素)和内联块状元素
元素分类在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div>.<p>.<h1&g ...
ASP.NET Ajax简单的无刷新分页
最近练习了一些AJAX无刷新分页,写得比较简单,性能不知道怎么样,求大神指点,如有更好的分页提供,欢迎交流! 发话不多说了,直接上代码! 首先从网上下了一个JS分页,感觉挺好用的 (function( ...
ZOJ 3872 Beauty of Array （The 12th Zhejiang Provincial Collegiate Programming Contest ）
对于没有题目积累和clever mind的我来说,想解这道题还是非常困难的,也根本没有想到用dp. from: http://blog.csdn.net/u013050857/article/deta ...

原创的基于HTML/CSS/JavaScript的层级目录树

原创的基于HTML/CSS/JavaScript的层级目录树的更多相关文章

随机推荐

热门专题