wordpress配置文章详情页自动生成目录点击定位

最新推荐文章于 2025-11-29 13:42:57 发布

原创

最新推荐文章于 2025-11-29 13:42:57 发布 · 497 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

1、进入后台文章编辑页面，将需要生成目录的标题改为h2

2、进入文章详情页elementor编辑页，在文章详情上新增一个html容器，放入以下内容

<!-- 进度条容器 -->
<div id="progress-container">
  <div id="progress-bar"></div>
</div>

<!-- 目录容器 -->
<div id="toc-container">
  <h2>目录</h2>
  <ul id="toc-list"></ul>
</div>

<script>
  // 自动生成目录
  document.addEventListener('DOMContentLoaded', function() {
    const tocContainer = document.getElementById('toc-container');
    const tocList = document.getElementById('toc-list');
    
    // 获取页面上所有的 h2 标签
    const headings = document.querySelectorAll('.elementor-widget-theme-post-content h2');

    // 遍历 h2 标签并创建目录项
    headings.forEach((head