一个分级目录的案例

最新推荐文章于 2020-06-06 11:08:04 发布
最新推荐文章于 2020-06-06 11:08:04 发布
阅读量198 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://my.oschina.net/gh200/blog/868434
版权

为什么80%的码农都做不了架构师？>>>   hot3.png

<!DOCTYPE html> 

<html> 

    

<head> 

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

    <title></title> 

    <style> 

        * { 

    margin: 0; 

    padding: 0; 

    list-style: none; 

} 

    

body { 

    font: 12px ; 

    padding-top: 20px; 

} 

    

#menu { 

    width: 200px; 

    margin: auto; 

} 

    

#menu h1 { 

    cursor: pointer; 

    color: #FFF; 

    font-size: 12px; 

    padding: 5px 0 3px 10px; 

    border: #C60 1px solid; 

    margin-top: 1px; 

    background-color: #F93; 

} 

    

#menu h2 { 

    cursor: pointer; 

    color: #777; 

    font-size: 12px; 

    padding: 5px 0 3px 10px; 

    border: #E7E7E7 1px solid; 

    border-top-color: #FFF; 

    background-color: #F4F4F4; 

} 

    

#menu ul { 

    padding-left: 15px; 

    height: 100px; 

    border: #E7E7E7 1px solid; 

    border-top: none; 

    overflow: auto; 

} 

    

#menu ul li { 

    padding: 5px 0 3px 10px; 

} 

    

.no { 

    display: none; 

} 

    </style> 

    <script language="JavaScript"> 

        function ShowMenu(obj, noid) { 

            var block = document.getElementById(noid); 

            var n = noid.substr(noid.length - 1); 

            if (noid.length == 4) { 

                var ul = document.getElementById(noid.substring(0, 3)).getElementsByTagName("ul"); 

                var h2 = document.getElementById(noid.substring(0, 3)).getElementsByTagName("h2"); 

                for (var i = 0; i < h2.length; i++) { 

                    h2[i].innerHTML = h2[i].innerHTML.replace("+", "-"); 

                    h2[i].style.color = ""; 

                } 

                obj.style.color = "#FF0000"; 

                for (var i = 0; i < ul.length; i++) { 

                    if (i != n) { 

                        ul[i].className = "no"; 

                    } 

                } 

            } else { 

                var span = document.getElementById("menu").getElementsByTagName("span"); 

                var h1 = document.getElementById("menu").getElementsByTagName("h1"); 

                for (var i = 0; i < h1.length; i++) { 

                    h1[i].innerHTML = h1[i].innerHTML.replace("+", "-"); 

                    h1[i].style.color = ""; 

                } 

                obj.style.color = "#0000FF"; 

                for (var i = 0; i < span.length; i++) { 

                    if (i != n) { 

                        span[i].className = "no"; 

                    } 

                } 

            } 

            if (block.className == "no") { 

                block.className = ""; 

                obj.innerHTML = obj.innerHTML.replace("-", "+"); 

            } else { 

                block.className = "no"; 

                obj.style.color = ""; 

            } 

        } 

    </script> 

</head> 

    

<body> 

    <div id="menu"> 

        <h1 onClick="javascript:ShowMenu(this,'NO0')"> - A</h1> 

        <span id="NO0" class="no"> 

   <h2 onClick="javascript:ShowMenu(this,'NO00')"> - A_1</h2> 

   <ul id="NO00" class="no"> 

    <li>A_0</li> 

    <li>A_1</li> 

    <li>A_2</li> 

    <li>A_3</li> 

    <li>A_4</li> 

    <li>A_5</li> 

   </ul> 

   <h2 onClick="javascript:ShowMenu(this,'NO01')"> - A_2</h2> 

   <ul id="NO01" class="no"> 

    <li>A_0</li> 

    <li>A_1</li> 

    <li>A_2</li> 

    <li>A_3</li> 

    <li>A_4</li> 

   </ul> 

   <h2 onClick="javascript:ShowMenu(this,'NO02')"> -A_3</h2> 

   <ul id="NO02" class="no"> 

    <li>A_0</li> 

    <li>A_1</li> 

    <li>A_2</li> 

    <li>A_3</li> 

    <li>A_4</li> 

    <li>A_5</li> 

    <li>A_6</li> 

   </ul> 

   <h2 onClick="javascript:ShowMenu(this,'NO03')"> -A_4</h2> 

   <ul id="NO03" class="no"> 

    <li>A_0</li> 

    <li>A_1</li> 

    <li>A_2</li> 

    <li>A_3</li> 

    <li>A_4</li> 

    <li>A_5</li> 

    <li>A_6</li> 

    <li>A_7</li> 

   </ul> 

</span> 

        <h1 onClick="javascript:ShowMenu(this,'NO1')"> - B</h1> 

        <span id="NO1" class="no"> 

   <h2 onClick="javascript:ShowMenu(this,'NO10')"> - B_1</h2> 

   <ul id="NO10" class="no"> 

    <li>B_0</li> 

    <li>B_1</li> 

    <li>B_2</li> 

    <li>B_3</li> 

    <li>B_4</li> 

    <li>B_5</li> 

    <li>B_6</li> 

    <li>B_7</li> 

   </ul> 

   <h2 onClick="javascript:ShowMenu(this,'NO11')"> - B_2</h2> 

   <ul id="NO11" class="no"> 

    <li>B_0</li> 

    <li>B_1</li> 

    <li>B_2</li> 

    <li>B_3</li> 

    <li>B_4</li> 

    <li>B_5</li> 

    <li>B_6</li> 

    <li>B_7</li> 

   </ul> 

</span> 

        <h1 onClick="javascript:ShowMenu(this,'NO2')"> - C</h1> 

        <span id="NO2" class="no"> 

   <h2 onClick="javascript:ShowMenu(this,'NO20')"> - C_1</h2> 

   <ul id="NO20" class="no"> 

    <li>C_0</li> 

    <li>C_1</li> 

    <li>C_2</li> 

    <li>C_3</li> 

    <li>C_4</li> 

    <li>C_5</li> 

    <li>C_6</li> 

    <li>C_7</li> 

    <li>C_8</li> 

    <li>C_9</li> 

   </ul> 

   <h2 onClick="javascript:ShowMenu(this,'NO21')"> - C_2</h2> 

   <ul id="NO21" class="no"> 

    <li>C_0</li> 

    <li>C_1</li> 

    <li>C_2</li> 

    <li>C_3</li> 

    <li>C_4</li> 

   </ul> 

</span> 

        <h1 onClick="javascript:ShowMenu(this,'NO3')"> - D</h1> 

        <span id="NO3" class="no"> 

   <h2 onClick="javascript:ShowMenu(this,'NO30')"> - D_1</h2> 

   <ul id="NO30" class="no"> 

    <li>D_0</li> 

    <li>D_1</li> 

    <li>D_2</li> 

    <li>D_3</li> 

   </ul> 

   <h2 onClick="javascript:ShowMenu(this,'NO31')"> - D_2</h2> 

   <ul id="NO31" class="no"> 

    <li>D_0</li> 

    <li>D_1</li> 

    <li>D_2</li> 

    <li>D_3</li> 

    <li>D_4</li> 

    <li>D_5</li> 

   </ul> 

</span> 

    </div> 

</body> 

    

</html>

转载于:https://my.oschina.net/gh200/blog/868434

weixin_33804990
关注
多级目录设计思想
ctangqh的专栏
05-24 2403
一、基本设计思路改进表结构：可以实现无限级分目录, 根据网站需求可限制最多分级目录如5级目录ID 主键ENName, ENName，CHNName1，JapanName，KoreaName 分类名称ParentID 父节点ID (与ID成父子关系) ParentID 为0 时表示根目录ParentID 等于 ID 的值时，表示对应ID的子目录Depth 当前结点分类级数(深
目录范例(上)
Jenya's blog
10-08 388
1.     cd (不带参数，直接进入主目录) mkdir -p a1/a2/a3 mkdir -p b1/b2/b3/b4/b5 mkdir -p c1/c2/c3/c4   cd a1/a2/a3 pushd . (或者使用别名“+”) cd ~/b1/b2/b3/b4/b5 pushd . (或者使用别名“+”) cd ~/c1/c2/c3/c4 pwd (这时当
目录分类...
Gamedev
02-10 456
欢迎使用Markdown编辑器写博客 本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦： Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和图片上传 LaTex数学公式 UML序列图和流程图 离线写博客 导入导出Markdown文件 丰富的快捷键 快捷键 加粗 Ctrl + B 斜体 Ctrl + I...
重要文章分类目录
一期一会的博客
03-11 689
本篇汇总分类已写的文章。 原生JavaScript JavaScript设计模式文章汇总： javascript设计模式一： 单例模式 javascript设计模式二：策略模式 javascript设计模式三：代理模式 javascript设计模式四：迭代器模式 javascript设计模式五: 原型模式 javascript设计模式六：发布-订阅模式(观察者模式) javascript设计模式七...
各类算法分类目录
weixin_30559481的博客
09-08 133
查找算法 排序算法 转载于:https://www.cnblogs.com/azbane/p/11487584.html
数据分类分级落地应用案例解析.docx
03-19
数据分类分级落地应用案例解析 数据分类分级是数据安全治理的基础和首要工作，对于数据安全和精细化管控具有重要意义。近年来，国家层面明确提出建立数据分类分级保护制度，金融、工业等行业监管也早已制定相关配套...
数据分类分级实施参考案例集
06-14
政务领域、金融领域、电信领域、能源领域、医疗健康领域、互联网领域、智能网联汽车领域数据分类分级案例
数据分级分类实施案例.PDF
06-25
数据分级分类实施案例.PDF
数据分类分级规则标准体系建设应用案例解析分类分级模板参考资料（9份）.zip
最新发布
09-26
2023 数据分类分级标准解读及分类分级技术实践（52页）.pptx 《数据安全技术 数据分类分级规则》47页.pptx ...数据分类分级落地应用案例解析.docx 数据分级分类管理方案[13页].pptx 详细解析数据的分类与分级.docx
MATLAB水果分级系统实现案例
01-24
在本项目中，我们探讨的是一个使用MATLAB开发的水果分级系统。MATLAB是一种强大的编程环境，特别适合于数值计算、数据分析以及用户界面设计。在这个案例中，MATLAB被用来创建一个能够根据水果特征进行自动分拣的人机...
用ASP和JavaScript实现网页上的动态分级目录
09-14
电视大学的教学进入网络时代。一个界面友好的网页或应用程序是离不开分级目录的，在这里主要介绍一种用ASP技术和javascript来实现动态分级目录的方法。动态分级目录，即网页上所显示分级目录的各个结点是以一定的数据结构存储在数据库中的，因此就可以通过对数据库进行相应的增、删、改操作来控制网页上的显示内容，达到方便、直观、快捷的目的
遍历目录算法
清流弯弯
09-19 2948
算法实现的基本功能： 遍历某一目录A，将改目录A下的子目录及文件按层次关系插入到树控件中（树控件以A为根节点） 算法思想：   1初始化： 目录A的路径，遍历深度Depth, 树控件目录A的句柄H            Vector 文件夹容器；            Vector   文件容器； 2 分类处理：          将目录A下的文件夹
word 常用技巧四（分级、目录、段前、段后、行距）
黄彪博客
09-07 5506
一、设置大纲多级列表 在工作中，经常需要使用分级显示目录，由于分级使用的是“域”，不能手动的改变，下面我介绍自己手动添加分级目录的方法   1、先创建好一级标题，      1.1 使用“多级列表”，      1.2 调整好一级标题样式      1.3 将调整好的样式作为创建自定义样式hb_level1 2、选中需要设置一级标题的文字，采用自定义样式hb_level1即可  
word 多级目录实现
leelong80的专栏
01-25 2482
word 2007 中 在一级目录文本上选格式为“标题一”，格式-->段落-->定义新的多级目录列表-->将级别链接到样式，选中“标题一”。在二级目录文本上选格式为“标题二”，格式-->段落-->定义新的多级目录列表-->将级别链接到样式，选中“标题二”。 很常时间都在找这个功能怎么时现，哈哈终于找到了。
目录分级_两种方法
超人不会飞
03-27 3545
package com.itheima.utils; public class UploadUtils { public static String getPath(String uuid) { int in = uuid.hashCode(); String string = Integer.toHexString(in); return "/"+string.charAt(...
毕业生写论文必备！！从一级目录到三级目录，自动生成美观的目录
热门推荐
ly_qiu的博客
06-06 2万+
如图所示，我会告诉大家，怎么生成出整齐又美观的目录。 搞定各级目录的格式设置 1.设置目录1的格式 右键点击目录1所在位置，点击修改样式 选择学校所要求的字体格式 点击格式 点击段落，按照我所给的数字设置即可 此时一级目录就设置好了 2.设置目录2的格式 前面的操作与设置1相同，唯一区别在于缩进量。缩进量设置合适，会让人视觉效果上很舒适 3.设置目录3的格式 更新目录 大家可以根据自己的需求，选择是只更新页码还是更新整个目录。 ...
JavaScript树形目录 收集整理
来杯咖啡，随便聊聊。
07-29 239
Javascript是Web开发常用的工具，如果自己开发，是比较复杂的，这里给大家推荐12Javascript树。这些js树有些用过，有些研究过，供大家参考。 [b]1.jsTree[/b] jsTree是一个基于jQuery的Tree控件。支持XML，JSON，Html三种数据源。提供创建，重命名，移动，删除，拖\放节点操作。可以自己自定义创建，删除，嵌套，重命名，选择节点的规则。在这些操...
div代码大全 DIV代码使用说明
weixin_30813225的博客
07-04 925
　　一、DIV代码语法 - TOP 　　DIV代码是放入小于与大于符号内，即“<div>”。 　　DIV是一对闭合标签，即“”开始，“结束”的盒子标签。 　　语法结构： <div>我是内容</div> 　　说明：div代码有开始就要必须有闭合。使用“<div>”开始，“/div”闭合。 　　二、DIV嵌套DIV ...
Git做类似目录级别的管理-git submodule
y378935681的博客
10-26 2478
Git做类似目录级别的管理-git submodule Git无法做到目录级别的权限控制。只能使用submodule或者subtree实现模块化的git管理。 公司打算用Git来做代码管理，原有的SVN不再使用。考虑到代码安全性的问题，必须在本地部署Git托管服务，并且要实现类似SVN目录级的权限管理。总结了下： 本地部署Git仓库 项目需要使用模块化管理，根据模块设定开发者权限 思路这种需求很
Rational案例：全程质量保证提升策略
"持续质量保证：一个初级案例研究探讨了在IBM Rational的软件开发实践中如何确保产品质量。该案例强调了在整个软件开发生命周期中实施质量保证的重要性，无论产品是内部开发还是从经销商处获取。软件开发专家认为，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值