目录

查看
  • 编辑修改
  • 首页
  • UNITY
  • NODEJS
  • PYTHON
  • AI
  • GIT
  • PHP
  • GO
  • CEF3
  • JAVA
  • HTML
  • CSS
devbox
菜鸟追梦旅行
这个屌丝很懒,什么也没留下!
关注作者
热门标签
  • jquery
  • HTML
  • CSS
  • PHP
  • ASP
  • PYTHON
  • GO
  • AI
  • C
  • C++
  • C#
  • PHOTOSHOP
  • UNITY
  • iOS
  • android
  • vue
  • xml
  • 爬虫
  • SEO
  • LINUX
  • WINDOWS
  • JAVA
  • MFC
  • CEF3
  • CAD
  • NODEJS
  • GIT
  • Pyppeteer
  • article
热门文章
  • 1JavaScript中对象复制导致两个对象存在关联问题_fstadmin js 复制一行能关联到其他
  • 2时间格式转换(Date转时间戳)
  • 3GNU ARM汇编--(十六)bootloader与kernel之间的commandline的传递_linux bootloader 向kernel commandline
  • 4给你一个链表,两两交换其中相邻的节点,并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题(即,只能进行节点交换)_给你一个链表,两两交换其中相邻的节点,并返回交换后链表的头节点。你必须在不修改
  • 5蓝桥杯史上最详细Python解析(十四届)_十三十四蓝桥杯青年题python真题
  • 6java string byte[] 互相转换_string byte 互相转换
  • 7众安保险产品校招一面面经_ssp面试笔记
  • 8最新收集全网免费的API接口开发平台 (程序员常用,建议收藏)_api接口开放平台
  • 9OA-SLAM:在视觉SLAM中利用对象进行相机重新定位
  • 10Gerrit 提示冲突,不能合并代码(git解决远程冲突)_the change cannot be merged
当前位置:   article > 正文

html / vue 自动生成目录_解析html形成目录

作者:菜鸟追梦旅行 | 2024-02-14 23:32:07

赞

踩

解析html形成目录

实现原理

获取全部内容节点,对节点进行遍历,将其中的标题节点存入目录列表中

完整范例代码 (以vue为例)

  1. <template>
  2. <div style="padding: 20px">
  3. <div class="menuBox">
  4. <p>目录</p>
  5. <el-scrollbar ref="scrollMenuRef" class="scrollMenuBox">
  6. <aside v-for="i in menuList" :key="i" v-html="i.title"></aside>
  7. </el-scrollbar>
  8. </div>
  9. <div class="contentBox">
  10. <main v-for="i in Total" :key="i">
  11. <h1>一级标题{{i}}</h1>
  12. <p>内容{{i}}</p>
  13. <p>内容{{i}}</p>
  14. <p>内容{{i}}</p>
  15. <p>内容{{i}}</p>
  16. <h2>二级标题{{i}}</h2>
  17. <p>内容{{i}}</p>
  18. <p>内容{{i}}</p>
  19. <p>内容{{i}}</p>
  20. <p>内容{{i}}</p>
  21. </main>
  22. </div>
  23. </div>
  24. </template>
  25. <script>
  26. export default {
  27. data() {
  28. return {
  29. menuList: [],
  30. Total: 60
  31. }
  32. },
  33. mounted() {
  34. [...document.getElementsByTagName("main")]
  35. .forEach(item => {
  36. [...item.children].forEach(
  37. item2 => {
  38. if (item2.tagName === "H1") {
  39. this.menuList.push(
  40. {
  41. content: item2.innerText,
  42. title: item2.outerHTML,
  43. level: 1,
  44. offsetTop: item2.offsetTop
  45. }
  46. )
  47. }
  48. if (item2.tagName === "H2") {
  49. this.menuList.push(
  50. {
  51. content: item2.innerText,
  52. title: item2.outerHTML,
  53. level: 2,
  54. offsetTop: item2.offsetTop
  55. }
  56. )
  57. }
  58. if (item2.tagName === "H3") {
  59. this.menuList.push(
  60. {
  61. content: item2.innerText,
  62. title: item2.outerHTML,
  63. level: 3,
  64. offsetTop: item2.offsetTop
  65. }
  66. )
  67. }
  68. if (item2.tagName === "H4") {
  69. this.menuList.push(
  70. {
  71. content: item2.innerText,
  72. title: item2.outerHTML,
  73. level: 4,
  74. offsetTop: item2.offsetTop
  75. }
  76. )
  77. }
  78. if (item2.tagName === "H5") {
  79. this.menuList.push(
  80. {
  81. content: item2.innerText,
  82. title: item2.outerHTML,
  83. level: 5,
  84. offsetTop: item2.offsetTop
  85. }
  86. )
  87. }
  88. if (item2.tagName === "H6") {
  89. this.menuList.push(
  90. {
  91. content: item2.innerText,
  92. title: item2.outerHTML,
  93. level: 6,
  94. offsetTop: item2.offsetTop
  95. }
  96. )
  97. }
  98. }
  99. )
  100. })
  101. },
  102. }
  103. </script>
  104. <style scoped>
  105. /*目录悬浮*/
  106. .menuBox {
  107. position: fixed;
  108. }
  109. /*内容居中*/
  110. .contentBox {
  111. width: 60%;
  112. margin: auto;
  113. }
  114. /*el-scrollbar 必须指定高度*/
  115. .scrollMenuBox {
  116. height: 600px;
  117. width: 200px;
  118. }
  119. /*隐藏水平滚动条*/
  120. /deep/ .el-scrollbar__wrap {
  121. overflow-x: hidden;
  122. }
  123. </style>

最终效果

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/82638
推荐阅读
  • articlehtml、Thymeleaf怎么原样输出html内容_thymeleaf 字符串 转 html...
    使用支付宝第三方接口,调用接口传递参数以后生成一段html文本,前端用了Thymeleaf框架,Thymeleaf怎么原...

    赞

    踩

  • articleRequest failed: unacceptable content-type: text/ht...
    今天在使用YTKNetWorking 解析数据时,返回错误信息 "Request failed: unacceptabl...

    赞

    踩

  • article【code-server】配置code server语言运行环境「IPAD编程」「Python」「J...
    文章目录Python环境配置1. 安装python32. 安装插件3. 配置code runnerJAVA环境配置1. ...

    赞

    踩

  • articleweb前端期末大作业 html+css+javascript汽车保险销售商城网页设计实例 企业网站制...
    常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 ...

    赞

    踩

  • articleflask后台与前端(html)交互的两种方法_flask与html交互...
    基于python flask框架搭建webflask后台与前端(html)交互的两种方法:方法1 使用flask-wtf...

    赞

    踩

  • articlehtml-video:计算视频是否完整播放 / 计算视频完播率...
    html-video:计算视频是否完整播放 / 计算视频完播率
    我们把duration按照一定间隔划分成多个区间(比如10s一个区间),然后我们计算是否每个区间都有上报的记录(至少有一...

    赞

    踩

  • article【ASP.NET教程-WP教程06】ASP.NET Web Pages - HTML 表单ASP.N...
    HTML 表单在 Web 开发中扮演着重要的角色,它们允许用户输入数据并与服务器进行交互。在 ASP.NET Web P...

    赞

    踩

  • articleASP.NET Web Pages - HTML 表单...
    表单是 HTML 文档中放置输入控件(文本框、复选框、单选按钮、下拉列表)的部分。ASP.NET Web Pages -...

    赞

    踩

  • articlehtml js实现tab代码,原生JS代码实现自动TAB切换(原创)...
    //声明变量var main = byId("main"),index = 0,nav = byId("nav"),ta...

    赞

    踩

  • articlehtml+css+JavaScript实现导航栏_js+css菜单栏...
    无下拉菜单的导航栏html><html lang="en"> [详细] -->

    赞

    踩

  • articleWord处理控件Aspose.Words功能演示:在 Python 中将 HTML 转换为 PNG、...
    它使我们能够生成、修改、转换、渲染和打印 Microsoft Word(DOC、DOCX、ODT)、PDF和 Web(H...

    赞

    踩

  • articlepytest两种生成测试报告的方法——html_pytest --html...
    pytest有两种生成测试报告的方法(html和allure),今天就给大家一介绍下html_pytest --html...

    赞

    踩

  • articlecode joox的access_FuseQRCode/index.html at f0463bbd...
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAA...

    赞

    踩

  • articleHtml-理解<em>前端开发em>中<em>单位em>(em<em>单位em>和rem<em>单位em>)和网络地址_<em>htmlem> em<em>单位em>...
    Html-理解<em>前端开发em><em>单位em>和网络地址一、常用的基本<em>单位em>emem 是CSS2引入的相对<em>单位em>,作为字体大小使用时和百分比<em>单位em>...

    赞

    踩

  • article关于爬虫中xpath返回为空的问题_为什么len(html.xpath)=0...
    关于爬虫中xpath返回为空的问题_为什么len(html.xpath)=0为什么len(html.xpath)=0 ...

    赞

    踩

  • article1f7b9a6b7c5.html,查看源码: 252beb5c-d85a-4f9a-8447-13f...
    objectreturnbookfrm:TreturnbookfrmLeft=206Top=161Width=590He...

    赞

    踩

  • articlesignature=34db6f8e3cd9ad368186a42fa9bb3c02,ad.html...
    DEMO2正在加载中......$(document).ready(function(){$(".fakeloader"...

    赞

    踩

  • articleweb期末作业设计网页:动漫网站设计——哆啦A梦(10页) HTML+CSS+JavaScript ...
    多啦a梦网页设计方案模板 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游...

    赞

    踩

  • article使用 HTML、CSS 和 JavaScript 创建侧边栏导航菜单_侧边导航栏jsp...
    在本教程中,我们将使用 HTML、CSS 和 JavaScript 创建侧边栏导航菜单。元素定位在浏览器窗口之外,因此在...

    赞

    踩

  • articlehtml-css-js移动端导航栏底部固定+i18n国际化全局_移动端 底部导航插件...
    需求:要做一个移动端的仿照小程序的导航栏页面操作,但是这边加上了i18n国家化,由于页面切换的时候会导致国际化失效,所以...

    赞

    踩

相关标签
  • vscode
  • code server
  • python
  • java
  • c++
  • 前端
  • 课程设计
  • html
  • dreamweaver
  • HTML学生个人网页设计
  • Web大学生网页成品
  • 音视频
  • asp.net
  • html js实现tab代码
  • word
  • aspose
  • aspose.words

Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。

  

闽ICP备14008679号