html标题自动生成树形目录,利用原生JS自动生成文章标题树的实例

最新推荐文章于 2024-03-10 13:30:19 发布
最新推荐文章于 2024-03-10 13:30:19 发布
阅读量831 收藏
点赞数
文章标签： html标题自动生成树形目录

实现原理很简单，就是循环文章模块，并抽取其中的h2、h3标签，将其中的内容赋予给新建的title树。

代码如下：

HTML代码：

二级标题

三级标题

hello hello hello hello hello hello hello hello hello hello hello hello

三级标题

三级标题

三级标题

三级标题

hello hello hello hello hello hello hello hello hello hello hello

二级标题

三级标题

三级标题

world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world

三级标题

三级标题

二级标题

三级标题

三级标题

二级标题

三级标题

三级标题

二级标题

三级标题

三级标题

CSS代码：

* {

margin: 0;

padding: 0;

border: 0;

}

body {

font: 16px/1.5;

}

ul li, ol li {

list-style: none;

}

.contextBox {

position: relative;

width: 960px;

margin: 0 auto;

}

#article {

margin-left: 200px;

border: 1px #eee solid;

padding: 15px;

}

.articleMenu a {

text-decoration: none;

color: #333;

}

.articleMenu a:hover {

color: #f85455;

}

.articleMenu-box {

width: 170px;

position: absolute;

left: 10px;

top: 10px;

}

.articleMenu {

padding: 10px;

border: 1px solid #ccc;

box-shadow: 2px 2px 2px #eee;

}

.titleH2, .titleH3 {

line-height: 1.5em;

}

.titleH2 {

font-weight: bold;

}

.titleH3 {

margin-left: 20px;

}

.articleMenu .articleMenu-close, .articleMenu-open {

display: inline-block;

position: absolute;

right: 0;

top: 0;

height: 44px;

width: 44px;

cursor: pointer;

}

.articleMenu-open {

background: url("http://www.dengzhr.com/wp-content/themes/dengzhr/images/icon_articleMenu_open.png") no-repeat 50% 50%;

display: none;

}

.articleMenu .articleMenu-close {

background: url("http://www.dengzhr.com/wp-content/themes/dengzhr/images/icon_articleMenu_close.png") no-repeat 50% 50%;

}

JavaScript代码：

var article = document.getElementById("article");

var articleHgroupMenu = document.getElementById("articleMenu");

// 关闭和展开文档树

var articleMenu_open = document.getElementById("articleMenu_open");

var articleMenu_close = document.getElementById("articleMenu_close");

articleMenu_close.onclick = function() {

articleHgroupMenu.style.display = "none";

articleMenu_open.style.display = "block";

};

articleMenu_open.onclick = function() {

articleHgroupMenu.style.display = "block";

articleMenu_open.style.display = "none";

};

//

titleHgroup(article, articleHgroupMenu, "titleH2", "titleH3");

// 获得obj下的直接子元素中为标题h2~h3的标题元素

// 参数说明：hgroupParent为包含h2和h3的直接父元素；MenuList为承载新建文章列表的ul元素；

// h2ClassName、h3ClassName分别为新建文章列表中对应h2、h3的li自列表的Class属性；

function titleHgroup(hgroupParent, MenuList, h2ClassName, h3ClassName) {

var hgroup = hgroupParent.children;

// 创建文档片段，来包裹自动生成的h2、h3对应生成的li列表

var fragment = document.createDocumentFragment();

for(i = 0; i < hgroup.length && hgroup[i].nodeType === 1; i++) {

// 为对应类型的标题生成li列表

// 参数说明：hType为标题的类型如h1~h6；className为标题对应的li列表的class属性值；

function titleToList(hType, className) {

var li = document.createElement("li");

li.className = className;

// 为li标签内部添加a标签，用锚点进行定位；

hgroup[i].id= hType + i;

li.innerHTML = ("" + hgroup[i].innerHTML +"");

fragment.appendChild(li);

}

// 当遍历中标题元素为h2时，调用titleToList(hType, className)新增对应的li列表；

if(hgroup[i].nodeName.toLowerCase() == "h2") {

titleToList("h2", h2ClassName);

}

// 当遍历中标题元素为h3时，调用titleToList(hType, className)新增对应的li列表；

if(hgroup[i].nodeName.toLowerCase() == "h3") {

titleToList("h3", h3ClassName);

}

}

// 将承载好对应li元素集合的文档片段fragment添加到DOM(即在DOM中包裹li列表的父元素)中去；

MenuList.appendChild(fragment);

}

完整实例代码

原生JS实现自动生成文章标题树

* {

margin: 0;

padding: 0;

border: 0;

}

body {

font: 16px/1.5;

}

ul li, ol li {

list-style: none;

}

.contextBox {

position: relative;

width: 960px;

margin: 0 auto;

}

#article {

margin-left: 200px;

border: 1px #eee solid;

padding: 15px;

}

.articleMenu a {

text-decoration: none;

color: #333;

}

.articleMenu a:hover {

color: #f85455;

}

.articleMenu-box {

width: 170px;

position: absolute;

left: 10px;

top: 10px;

}

.articleMenu {

padding: 10px;

border: 1px solid #ccc;

box-shadow: 2px 2px 2px #eee;

}

.titleH2, .titleH3 {

line-height: 1.5em;

}

.titleH2 {

font-weight: bold;

}

.titleH3 {

margin-left: 20px;

}

.articleMenu .articleMenu-close, .articleMenu-open {

display: inline-block;

position: absolute;

right: 0;

top: 0;

height: 44px;

width: 44px;

cursor: pointer;

}

.articleMenu-open {

background: url("http://www.dengzhr.com/wp-content/themes/dengzhr/images/icon_articleMenu_open.png") no-repeat 50% 50%;

display: none;

}

.articleMenu .articleMenu-close {

background: url("http://www.dengzhr.com/wp-content/themes/dengzhr/images/icon_articleMenu_close.png") no-repeat 50% 50%;

}

二级标题

三级标题

hello
hello
hello
hello
hello
hello
hello
hell
o hel
lo hell
o he
llo hello

三级标题

三级标题

三级标题

三级标题

hello hello hello hello hello hello hello hello hello hello hello

二级标题

三级标题

三级标题

world w
orld
world world wo
rld world wo
rld world world wor
ld world world
world
worl
d world
w
orld
world wo
rld wor
ld world wor
ld world worl
d w
or
ld
world
world
world
wo
rld wo
rld w
orld w
orld

三级标题

三级标题

二级标题

三级标题

三级标题

二级标题

三级标题

三级标题

二级标题

三级标题

三级标题

var article = document.getElementById("article");

var articleHgroupMenu = document.getElementById("articleMenu");

// 关闭和展开文档树

var articleMenu_open = document.getElementById("articleMenu_open");

var articleMenu_close = document.getElementById("articleMenu_close");

articleMenu_close.onclick = function() {

articleHgroupMenu.style.display = "none";

articleMenu_open.style.display = "block";

};

articleMenu_open.onclick = function() {

articleHgroupMenu.style.display = "block";

articleMenu_open.style.display = "none";

};

//

titleHgroup(article, articleHgroupMenu, "titleH2", "titleH3");

// 获得obj下的直接子元素中为标题h2~h3的标题元素

// 参数说明：hgroupParent为包含h2和h3的直接父元素；MenuList为承载新建文章列表的ul元素；

// h2ClassName、h3ClassName分别为新建文章列表中对应h2、h3的li自列表的Class属性；

function titleHgroup(hgroupParent, MenuList, h2ClassName, h3ClassName) {

var hgroup = hgroupParent.children;

// 创建文档片段，来包裹自动生成的h2、h3对应生成的li列表

var fragment = document.createDocumentFragment();

for(i = 0; i < hgroup.length && hgroup[i].nodeType === 1; i++) {

// 为对应类型的标题生成li列表

// 参数说明：hType为标题的类型如h1~h6；className为标题对应的li列表的class属性值；

function titleToList(hType, className) {

var li = document.createElement("li");

li.className = className;

// 为li标签内部添加a标签，用锚点进行定位；

hgroup[i].id= hType + i;

li.innerHTML = ("" + hgroup[i].innerHTML +"");

fragment.appendChild(li);

}

// 当遍历中标题元素为h2时，调用titleToList(hType, className)新增对应的li列表；

if(hgroup[i].nodeName.toLowerCase() == "h2") {

titleToList("h2", h2ClassName);

}

// 当遍历中标题元素为h3时，调用titleToList(hType, className)新增对应的li列表；

if(hgroup[i].nodeName.toLowerCase() == "h3") {

titleToList("h3", h3ClassName);

}

}

// 将承载好对应li元素集合的文档片段fragment添加到DOM(即在DOM中包裹li列表的父元素)中去；

MenuList.appendChild(fragment);

}

总结

以上就是利用原生JS自动生成文章标题树的全部内容，希望本文的内容对大家能有所帮助，如果有疑问可以留言讨论。

weixin_39884412
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html漂亮的树形目录
10-31
html漂亮的树形目录，简洁漂亮，非常实用
利用原生JS自动生成文章标题树的实例
10-21
网上关于生成文章标题树的示例很多，这篇文章介绍的是利用原生JS实现自动生成文章标题树，实现过程很简单，有需要的可以参考借鉴。
原生js 实现可拖拽树形目录结构
商嘉航的博客
10-16 2813
话不多说，先上图： 点我查看演示 实现技术要点 目录结构层级的不可确定性； 此处应当使用递归遍历的方式遍历数据对象； 依据每次遍历的结果生成一个节点； 贴代码： for(let i=0;i<obj.length;i++){ if(obj[i].children.length){//判断是否循环到当前叶子节点 this._forList(obj[i].children,this._s...
python实现生成树
最新发布
liulanba的博客
03-10 647
若(u,v)是一条具有最小叔值的边，其中u∈U， v∈V- U，则必存在一棵包含边(u,V)的最小生成树，基于该性质的最小生成树算法主要有Prim算法和Kruskal算法，它们都基于贪心算法的策略。最后，打印出构建出的最小生成树的边集合。Kruskal算法：Kruskal算法是一种基于并查集的贪心算法，它首先将所有边按权重从小到大排序，然后依次考虑每条边，如果当前边连接的两个顶点不在同一个连通分量中，则将这条边加入最小生成树中，并将这两个顶点合并到同一个连通分量中，直到最小生成树的边数达到n-1为止。
html5资源管理器,在Web界面下如何生成像资源管理器一样的树形目录
weixin_39968655的博客
05-31 424
在Web界面下如何生成像资源管理器一样的树形目录关键字 数形目录 XML ASP Web Javascript树形目录显示程序问题描述：在我们项目中常常会出现自关联的数据表，如果我们从整体看去，整个表就呈现为一个树形数据结构(对于复杂的情况，它可能变成一个图)。当我们对这个表进行显示，编辑时，如果不采用好的表现形式，会显得很笨拙，为此，我们开发这样的树形结构的程序。在上一版本中，我们使用的是递归算...
html 折叠目录树,JS脚本内建HTML目录树结构
weixin_33026363的博客
05-30 388
.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: #...
JS 生成文章目录树
Zichen_Lin的博客
10-25 1374
原文地址：我们在网页浏览文章时，会发现在页面上总有一块固定区域，用来展示文章的目录结构，以帮助我们快速定位到对应的内容。今天我们就用JavaScript来实现文章目录树的功能。
html结合js实现简单的树状目录
热门推荐
渣渣潘的博客
12-22 3万+
最近在学jsp，期末了要做项目，需要用到树状目录，百度了很多，都没有找到想要的答案，最后自己折腾了半天，才搞定。下面我就来分享一下怎么实现一个简单的树状目录：1. 下载jquery-treeview插件：github 百度云2. 解压刚才下载的压缩包，并将images文件夹的中gif复制到项目中的图片管理文件夹中，如下图： 当然复制到什么地方是你自己选择3. 然后将jquery.
[转]html结合js实现简单的树状目录(实用)
Ambrose_Ren的博客
12-04 1349
最近在学jsp，期末了要做项目，需要用到树状目录，百度了很多，都没有找到想要的答案，最后自己折腾了半天，才搞定。 下面我就来分享一下怎么实现一个简单的树状目录： 1. 下载jquery-treeview插件：github 百度云 2. 解压刚才下载的压缩包，并将images文件夹的中gif复制到项目中的图片管理文件夹中，如下图： 当然复制到什么地方是你自己选择 3. 然后将jquery.treeview.css复制到你项目的css管理文件中： 可选：复制...
前端html/js/css实现无限级目录树结构，点击目录展示当前子目录
qq_40868156的博客
10-10 2301
无限级，无级别限制，目录树前端实现，点击目录展示当前所有子目录，js，html
使用cmd中的tree命令生成目录树
wing123123的博客
05-05 502
TREE [drive:][path] [/F] [/A]    /F   显示每个文件夹中文件的名称。（带扩展名）    /A   使用 ASCII 字符，而不使用扩展字符。   tree /f &gt; list.txt  -- 将带扩展名的文件目录输出到list.txt文件中 ...
js动态目录树，像windows目录树一样，很方便的。
10-04
很漂亮的js目录树，像windows目录树一样，很方便的。
js 实现的树形目录
12-19
js 实现的树形目录 树实现动态检索数据。
JavaScript递归算法生成树形菜单
10-19
主要介绍了JavaScript递归算法生成树形菜单，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
文件夹目录树一键生成器v1.3.0
07-01
这个程序是一个文件夹目录树生成器，它可以帮助你生成文件夹的目录树并保存到TXT文本文件中。主要功能如下： 选择文件夹：你可以通过点击菜单栏中的“文件”菜单，然后选择文件夹来指定要生成目录树的文件夹路径。...
原生JS树树形插件xntree.js
08-05
原生JS树树形插件xntree.js是一款原生JS树，虚拟树组件，可支持超大数据量。
html编写代码的目录树
******* ▄︻┻┳═一 *******
07-31 6745
此为编写html代码的目录结构图： 下图展示了一个家族树。通过遍历，能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。 图示解析： div> 元素是 ul> 的父元素，同时是其中所有内容的祖先 ul> 元素是 li> 元素的父元素，同时是 div> 的子元素 左边的 li> 元素是 span
简单的js树状目录
didostream的专栏
02-25 1727
"JavaScript">with (document) {        write("");        write(".child {display:none}")        write("");    }function initIt(){        divColl = document.all.tags("DIV");        for (i=0; i         
使用javascript做树形目录
Macau Fish的专栏
04-06 1081
            //菜单一 first item----------------------------------------------------------var item_num=10;//var power=;  //父层菜单的行数 Hom many rows is the parent itemvar item02_word=new Array();  //菜单的文字 T
html原生树形控件
09-12
HTML原生没有提供树形控件。但你可以借助JavaScript的框架或插件来实现树形结构的效果。例如，你可以使用jQuery插件JQTreeTable来将普通的HTML表格转换成带有嵌有Tree控件的表格。另外，还有一个名为jQuery Simple Tree的可拖放树形控件，它支持通过Ajax动态加载树节点，并具有简单易于使用和漂亮的外观等特点。如果你想了解更多关于树形结构的实现方式，可以访问dhtmlgoodies网站的主页，该网站提供了一些相关的资源和示例。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值