原创的基于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 ...

随机推荐

【Android Studio使用教程 7】AndroidStudio问题汇总
FindBugs:Compiler output path for module can not be null. check your module/project settings问题原因 And ...
剑指Offer47 不用加减乘除做加法
/************************************************************************* > File Name: 47_AddTwo ...
用户体验测试（UE测试）
用户体验测试(UE测试) 在测试周期早些时候就开始用户体验测试很明智.多数人往往会把UE测试放在最后,但UE测试可以揭示很多问题,如外观.字体.文本颜色.背景颜色.内容.布局等,还可以在测试周期尽可能 ...
Fuck Sharepoint 2013
最近遇到一个貌似是bug的问题,每次点击页面的时候页面的地址多出一行/_layouts/15/start.aspx#/ 然后跑到google上搜索出解决方案, 地址:http://social.tec ...
Part 72 to 81 Talking about Dictionary and List collection in C#
Part 72 What is dictionary in c# Part 73 What is dictionary in c# continued Part 74 List colle ...
WPF非UI线程获取修改控件属性值的方法
public class InvokeHelper { #region delegates private delegate object MethodInvoker(Control control, ...
php中json_decode返回数组或对象的实例
1.json_decode() json_decode (PHP 5 >= 5.2.0, PECL json >= 1.2.0) json_decode — 对 JSON 格式的字符串进行 ...
【原创】Tomcat集群环境下对session进行外部缓存的方法（1）
BJJC网改版, 计划将应用部署在tomcat集群上,集群的部署方案为Apache+Tomcat6,连接件为mod_jk,其中开启了session复制和粘性session.计划节点数为3个. 到这,或 ...
HTML+CSS学习笔记 (11) - CSS盒模型
元素分类在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <di ...
ios 中的block应用
在这个大冬天里默默敲着键盘,勿喷.今天学习swift过程中,学习到闭包,发现闭包和oc的block中有很多的相同之处,又重新学习了一下并且学习了一些高级点的用法,内容如下: 1.block格式说明:( ...

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

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

随机推荐

热门专题