HTML自动生成功能目录方法

<h2 id="setup-env">环境配置</h2>
<h3 id="install-node">安装 Node.js</h3>
<nav>
  <a href="#setup-env">环境配置</a>
  <a href="#install-node">安装 Node.js</a>
</nav>

用 JavaScript 动态生成 TOC 的最小可行方案

核心逻辑就三步：找所有 h2 和 h3、提取文本并生成 id、拼 DOM 插入导航栏。关键不是“多酷”，而是避开 DOM 尚未加载、重复执行、特殊字符转义这三类坑。

• 必须等 DOM 加载完再运行，否则 document.querySelectorAll('h2, h3') 返回空数组
• 生成 id 时要过滤掉非字母数字字符，textContent 比 innerText 更可靠（后者受 CSS 影响）
• 不要用 innerHTML += 拼接导航，会触发重排；用 documentFragment 或一次性 innerHTML = str

简短示意（无依赖）：

const toc = document.getElementById('toc');
const headings = document.querySelectorAll('h2, h3');
let html = '';
headings.forEach(el => {
  const text = el.textContent.trim();
  const id = text.replace(/[^\w\s-]/g, '').replace(/\s+/g, '-').toLowerCase();
  if (!el.id) el.id = id;
  html += `<a target='_blank'  href='https://www.17golang.com/gourl/?redirect=MDAwMDAwMDAwML57hpSHp6VpkrqbYLx2eayza4KafaOkbLS3zqSBrJvPsa5_0Ia6sWuR4Juaq6t9nq6yhZx9o4qks5OwqI51jJi2d37Ogdyxo5KthWCxdnFkv42jYIp9grCzlbCigZyimbOImdCF3cijheB-nLCJfWa-s6Nt' rel='nofollow'>${text}</a>`;
});
toc.innerHTML = html;

为什么不用 CSS :target 或 :has() 实现“高亮当前章节”

:target 能样式化当前锚点元素，但无法反向高亮左侧导航里的对应链接；:has() 理论上可以（如 nav a:has(~ h2[id='xxx'])），但目前（2024）Chrome/Firefox 对 :has() 在复杂选择器中支持不稳定，且无法跨兄弟节点精准匹配。

• 实际项目中，“当前章节高亮”几乎全靠 JS 监听 hashchange + 手动加 class
• 如果只用纯 CSS，最接近的妥协是：用 h2:target { scroll-margin-top: 60px; } 控制滚动后留白，避免被固定 header 遮挡
• 别在生产环境赌 :has() 跨层级匹配导航项，它现在连 nav a:has(+ h2#xxx) 都不一定生效

真正麻烦的从来不是生成链接，而是保持 id 和内容同步——改了标题文字却忘了更新 href 或 id，或者多人协作时命名风格不统一。这类问题静态检查工具（如 html-validate）能抓一部分，但最省心的还是从一开始就定好规则并写进 PR 检查清单。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。