纯静态HTML网站需用JavaScript动态注入导航栏以实现自动同步和当前页高亮。通过js/nav-loader.js统一管理navHTML并匹配window.location.pathname，同时确保语义化结构与可访问性。
纯静态 HTML 网站没法自动同步导航栏，必须靠客户端脚本动态注入，否则每改一个菜单项就得手动更新所有 HTML 文件。
为什么不能直接复制粘贴到每个页面
硬编码 <nav><ul><li><a href="/about">关于</a></li></ul></nav> 到每个 HTML 文件里，看似简单，但只要新增一个菜单项或改个链接，就得逐页打开、查找、替换——漏改一页，导航就断；路径多斜杠（/about/ vs /about）或哈希路由（/#projects）还会导致当前页高亮失效。这不是“能用”，是“迟早出事”。
用 JavaScript 动态加载 navHTML 字符串
在 js/nav-loader.js 里定义导航 HTML 内容，再让所有页面统一加载它。这是静态站点最轻量、无后端依赖的方案。
- 创建
js/nav-loader.js，内容为：const navHTML = `<nav aria-label="主菜单"><ul><li><a href="/">首页</a></li><li><a href="/about">关于</a></li><li><a href="/services">服务</a></li></ul></nav>`;document.querySelector('header').innerHTML = navHTML; - 所有 HTML 页面的
<header>标签必须存在且唯一，否则document.querySelector('header')会找不到或选错位置 - 脚本必须放在
</body>前，确保 DOM 已解析完成；若放<head>里，querySelector会返回null - 本地开发用
file://协议时，window.location.pathname可能为空，高亮逻辑需 fallback 到link.href.includes(currentPath)
当前页高亮必须靠 JS 路径匹配
HTML 本身没有“感知当前 URL”的能力，class="active" 不可能静态写死。必须用 JS 实时比对 window.location.pathname 和每个 <a> 的 pathname。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 在
nav-loader.js底部追加高亮逻辑：document.querySelectorAll('nav a').forEach(link => { const currentPath = window.location.pathname || '/'; const linkPath = new URL(link.href).pathname; if (linkPath === currentPath) { link.classList.add('active'); }}); - 注意：如果页面 URL 是
https://example.com/about/，而链接是/about，两者不等——建议统一路径结尾风格，或用linkPath.replace(/\/$/, '') === currentPath.replace(/\/$/, '')处理尾部斜杠 - 单页应用（SPA）需监听路由变化，比如 Vue Router 的
router.afterEach或 React Router 的useLocation，不能只执行一次
别忽略可访问性与语义结构
用 <div class="nav"> 替代 <nav>，看起来一样，但键盘 Tab 顺序可能错乱，读屏器根本不会播报这是导航区。
- 必须用
<nav aria-label="主菜单">，多个<nav>时靠aria-label区分用途 -
<ul><li>是标准结构，别用<div>套<a>—— 否则焦点顺序、语义识别、SEO 权重全受影响 - 禁用
outline: none除非提供等效焦点样式（如box-shadow: 0 0 0 2px #007cba），否则键盘用户无法看到当前聚焦项 - 下拉菜单按钮必须带
aria-expanded和aria-controls，否则视障用户不知道点击后会发生什么
真正麻烦的不是写几行 JS，而是路径匹配的边界情况（尾部斜杠、哈希、查询参数）、本地协议兼容、以及可访问性属性漏加——这些地方一漏，导航就从“可用”变成“对部分用户不可用”。
