html目录树的操作

最新推荐文章于 2022-04-18 22:46:19 发布
最新推荐文章于 2022-04-18 22:46:19 发布
阅读量838 收藏
点赞数
文章标签： xhtml

示例：http://www.cnblogs.com/endv/p/4018554.html#endv9

 

 

目录
1.目录1
2.目录
3.目录
4.目录
5.目录
6.目录
7.目录
8.目录
9.目录
10.目录
11.目录
       目录连接到标题，先看效果，单击折叠或展开，原代码在 目录5。

1. 目录

插入内容

2. 目录

0000

3. 目录

0000

4. 目录

0000

5. 目录 原代码在这里（展开）

0000 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
 
</head>
<body>
    <div>
        <div id="endv" style="color: #ff0000;" onclick="document.all.endv0_1.style.display = (document.all.endv0_1.style.display == 'none') ? '' : 'none'" dir="ltr">目录</div>

        <!--<div id="endv1">-->

        <div id="endv0_1">
            <a href="#endv1">1.目录1 </a><br />
            <a href="#endv2">2.目录</a><br />
            <a href="#endv3">3.目录  </a><br />
            <a href="#endv4">4.目录  </a><br />
            <a href="#endv5">5.目录  </a><br />
            <a href="#endv6">6.目录  </a><br />
            <a href="#endv7">7.目录  </a><br />
            <a href="#endv8">8.目录  </a><br />
            <a href="#endv9">9.目录  </a><br />
            <a href="#endv10">10.目录  </a><br />
            <a href="#endv11">11.目录  </a><br />
           
        </div> <!-- endv1 -->
        <!--<div id="endv4">-->

        <div id="endv1" style="color: #ff0000;" onclick="document.all.endv1_1.style.display = (document.all.endv1_1.style.display == 'none') ? '' : 'none'"
             dir="ltr"  ><h2 aria-atomic="false">1. 目录</h2></div>


        <div id="endv1_1">
            插入内容
        </div>
        <!-- endv1 -->

        <!--<div id="endv4">-->

        <div id="endv2" style="color: #ff0000;" onclick="document.all.endv2_1.style.display = (document.all.endv2_1.style.display == 'none') ? '' : 'none'"
             dir="ltr" aria-atomic="true"><h2 aria-atomic="false">2. 目录</h2></div>


        <div id="endv2_1">
            0000
        </div><!-- endv1 -->

        <!--<div id="endv4">-->

        <div id="endv3" style="color: #ff0000;" onclick="document.all.endv3_1.style.display = (document.all.endv3_1.style.display == 'none') ? '' : 'none'"
             dir="ltr" aria-atomic="true"><h2 aria-atomic="false">3. 目录</h2></div>


        <div id="endv3_1">
            0000
        </div><!-- endv1 -->


        <!--<div id="endv4">-->

        <div id="endv4" style="color: #ff0000;"  onclick="document.all.endv4_1.style.display = (document.all.endv4_1.style.display == 'none') ? '' : 'none'"
             dir="ltr" aria-atomic="true"><h2 aria-atomic="false">4. 目录</h2></div>


        <div id="endv4_1">
            0000
        </div><!-- endv1 -->
        <!--<div id="endv5">-->

        <div id="endv5" style="color: #ff0000;" onclick="document.all.endv5_1.style.display = (document.all.endv5_1.style.display == 'none') ? '' : 'none'"
             dir="ltr" aria-atomic="true"><h2 aria-atomic="false">5. 目录</h2></div>


        <div id="endv5_1">
            0000
        </div><!-- endv1 -->
        <!--<div id="endv6">-->

        <div id="endv6" style="color: #ff0000;" onclick="document.all.endv6_1.style.display = (document.all.endv6_1.style.display == 'none') ? '' : 'none'"
             dir="ltr" aria-atomic="true"><h2 aria-atomic="false">6. 目录</h2></div>


        <div id="endv6_1">
            0000
        </div>
        <!--<div id="endv7">-->

        <div id="endv7" style="color: #ff0000;" onclick="document.all.endv7_1.style.display = (document.all.endv7_1.style.display == 'none') ? '' : 'none'"
             dir="ltr" aria-atomic="true"><h2 aria-atomic="false">7. 目录</h2></div>


        <div id="endv7_1">
            0000
        </div>
        <!--<div id="endv8">-->

        <div id="endv8" style="color: #ff0000;" onclick="document.all.endv8_1.style.display = (document.all.endv8_1.style.display == 'none') ? '' : 'none'"
             dir="ltr" aria-atomic="true"><h2 aria-atomic="false">8. 目录</h2></div>


        <div id="endv8_1">
            0000
        </div>
        <!--<div id="endv1">-->

        <div id="endv9" style="color: #ff0000;" onclick="document.all.endv9_1.style.display = (document.all.endv9_1.style.display == 'none') ? '' : 'none'"
             dir="ltr" aria-atomic="true"><h2 aria-atomic="false">9. 目录</h2></div>


        <div id="endv9_1">
            0000
        </div>
        <!--<div id="endv10">-->

        <div id="endv10" style="color: #ff0000;" onclick="document.all.endv10_1.style.display = (document.all.endv10_1.style.display == 'none') ? '' : 'none'"
             dir="ltr" aria-atomic="true"><h2 aria-atomic="false">10. 目录</h2></div>


        <div id="endv10_1">
            0000
        </div>
        <!--<div id="endv11">-->

        <div id="endv11" style="color: #ff0000;" onclick="document.all.endv11_1.style.display = (document.all.endv11_1.style.display == 'none') ? '' : 'none'"
             dir="ltr" aria-atomic="true"><h2 aria-atomic="false">11. 目录</h2></div>







    </div>
</body>
</html>
代码

 

6. 目录

0000

7. 目录

0000

8. 目录

0000

9. 目录

0000

10. 目录

0000

11. 目录

 作者：http://www.cnblogs.com/endv/p/4018554.html#endv9

源码下载：http://files.cnblogs.com/endv/Htmltree.zip

weixin_34290390
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
word生成html目录树,word将自定义目录做成模板
weixin_39730671的博客
06-05 1579
word里目录怎么做才方便呢？有没有文字最佳排版格式？？Word里面的目录做起来很方便呀，做成自动生成的就好了呀。成目录等功能的前提是正确使用“样式”，工具栏最左边的小方框注意了吗，平时是“正文”，下拉箭头有“标题1、标题”等等，这就是样式！自动生成文章目录的操作：一、设置标题格式 1.选中文章中的所有一级标题； 2.在“格式”工具栏的左端，“样式”列表中单击“标题1”。仿照步骤1、2设置二、三级...
html漂亮的树形目录
10-31
html漂亮的树形目录，简洁漂亮，非常实用
Html网页目录树效果
11-07
轻松做出html网页目录树效果，本资料适用于初学者，不占用内存，不占用资源，轻轻松松在页面搞定
html 折叠目录树,JS脚本内建HTML目录树结构
weixin_33026363的博客
05-30 443
.hanyeguxing {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;font-size: 11px;color: #666;white-space: nowrap;}.hanyeguxing img {border: 0px;vertical-align: middle;}.hanyeguxing a {color: #...
html编写代码的目录树
******* ▄︻┻┳═一 *******
07-31 6814
此为编写html代码的目录结构图： 下图展示了一个家族树。通过遍历，能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。 图示解析： div> 元素是 ul> 的父元素，同时是其中所有内容的祖先 ul> 元素是 li> 元素的父元素，同时是 div> 的子元素 左边的 li> 元素是 span
html+css+js 递归实现目录树
Infatuatedmonkey的博客
04-18 1180
参考与https://ke.qq.com/webcourse/417875/100498562#taid=10178943642918995&vid=5285890806745023231 如有侵权还请速速联系！！！ 1，效果图 2，源码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>目录树结构</title> </head>
百度网盘目录树生成器v2.0版本
04-19
标题“百度网盘目录树生成器v2.0版本”涉及到的是一个专为百度网盘设计的工具，其主要功能是帮助用户生成网盘内的目录树结构。这个工具是基于Python编程语言编写的，并且已经打包为Windows可执行文件（exe），方便在...
HTML树型控件.zip_html格式目录树
01-09
在本压缩包中，主要包含了一个名为"zTree"的jQuery插件，它使得在HTML页面中创建交互式树形结构变得简单易行。 1. **zTree简介** zTree是一款基于jQuery的开源免费树形插件，广泛应用于各种项目中，因其高效、灵活...
tree12-30.rar_目录树_目录树 java语言_目录树 js
09-20
总结，构建目录树结构涉及文件系统操作、数据结构的理解以及前端交互的实现。Java提供了强大的文件操作能力，而JavaScript则擅长于动态生成和操作DOM。两者结合可以创建出既实用又美观的目录树视图。对于给定的...
AlaiJSCtr.rar_目录树_目录树 js
09-23
目录树，或者叫做文件系统树，是计算机科学中一种用于表示文件和文件夹层次结构的图形化方式，常用于文件管理器或编程中的文件操作。在这个项目中，开发者可能使用JavaScript来创建一个可交互的、动态展示目录结构的...
纯HTML CSS JS目录树形框TreeView
07-15
纯HTML CSS JS目录树形框TreeView,带图标及节点虚线,无加载库
html树形菜单
07-21
html 简单树形菜单demo
HTML树形菜单
08-30
树形菜单
html目录树练习图片,前端开发才是你的舞台·初识HTML
weixin_35068573的博客
07-10 238
HTML初识写在前面：如果你想制作自己的网页，做网页设计，网站开发，那么你首先要学习的就是HTML，并能熟练掌握HTML文件的编写。也许你编程语言学的不好甚至很差，不要怕，HTML完全是另一种语言，又是一片新天地，说不定这才是适合你的舞台哦。HTML很容易上手的，Don't be shy ，let's have a try !!!开始定制只属于你自己的网页吧。本教程一共分为五个小实验，请有需要的朋...
html 折叠目录树,html+javascript=目录树
weixin_29657209的博客
05-30 268
项目列表body {background-color: #EEEEEE;margin-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;}td { font-size: 12px; }a:link {color: #0099FF;text-decoration: none;}a:visited {text-decorati...
html+自动生成目录树,如何将目录树输出为HTML？
weixin_33489161的博客
06-02 611
这是我到目前为止所得到的：project_dir = '/my/project/dir'project_depth = len(project_dir.split(os.path.sep))xml_files = []for dirpath, dirnames, filenames in os.walk(project_dir):for filename in fnmatch.filter(fil...
用HTML做树形菜单,jquery实现树形菜单完整代码
weixin_31526891的博客
06-04 1125
本实例实现了树形的动态菜单，兼容IE8,火狐，Chrome等浏览器。使用了jQuery的toggle() 方法。效果和代码如下：jquery的树形菜单代码 body { font-family:"宋体"; font-size: 12px; line-height: 1.5em; color:#7FB0C8; padding:0; margin:0; background: #336699;}ul,...
html递归目录树,一个带CheckBox的树形目录的递归算法（javascript）
weixin_36378832的博客
06-16 291
唉，很久以前写的代码，晒一晒，估计自己看都看不懂了，:(var head="display:''"img_close=new Image()img_close.src="/sysManage/p_w_picpaths/f.gif"img_open=new Image()img_open.src="/sysManage/p_w_picpaths/fo.gif"img3=new Image()img3...
html 多级目录树,纯javript实用多级目录树结构插件
weixin_30402231的博客
06-26 671
简要教程aimaraJS是一款非常实用的纯javascript响应式多级目录树结构插件。该目录树可以动态添加和删除树节点，可以制作多级树结构，每个节点上可以都带有右键上下文菜单，并且每个节点上都可以配置不同的图标。它的特点有：可以创建一个基本的树结构并渲染它。可以实时添加和删除树节点。可以显示不同的树节点图标。在树节点打开和关闭的时候可以自定义事件。每个树节点上都可以制作右键上下文菜单。使用方法使...
javascript目录树代码
最新发布
01-10
3. 递归构建目录树：使用递归算法，遍历目录树数据结构，将每个节点动态地添加到HTML容器中。对于每个节点，创建一个包含节点内容的元素，并将其附加到其父节点元素上。还可以为父节点和子节点添加相应的样式或事件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值