导航菜单数据来自JSON文件，需字段匹配（label/url/icon）、路径正确（绝对路径+base标签）、DOM加载后渲染并高亮当前页。
导航菜单数据从哪里来：JSON结构要匹配渲染逻辑
直接把 JSON 数据塞进 HTML 渲染前，先确认它的字段是否对得上模板需要的 label、url、icon（可选）这些键。常见错误是后端返回 name 和 link，但 JS 里却硬写成 item.label —— 结果菜单空白，控制台也没报错，只是 undefined 被拼进 DOM。
建议 JSON 示例长这样，兼容性高、语义清晰：
[
{"label": "首页", "url": "/"},
{"label": "产品", "url": "/products"},
{"label": "文档", "url": "/docs"},
{"label": "关于", "url": "/about"}
]
- 避免嵌套过深（比如
data.menu.items），除非你明确需要多级菜单，否则扁平数组最省事 - 如果 URL 是相对路径，确保
index.html所在位置不会导致跳转 404（例如部署在子目录时，用/products比products更稳） - 图标字段如存在，统一用类名（如
"icon": "icon-home"），方便用 CSS 管理，别塞内联 SVG
怎么把 JSON 塞进页面：fetch + innerHTML 最简路径
不用框架，就用原生 JS 在 <script> 标签里拉取并插入。关键不是“能不能做”，而是“在哪执行”——必须等 DOM 加载完再操作，否则找不到容器元素。
实操建议：
立即学习“前端免费学习笔记（深入）”；
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- 把导航容器标记为
<nav id="main-nav"></nav>，别依赖 class 或模糊选择器 - 用
fetch('./menu.json')，注意路径是相对于index.html的，不是 JS 文件位置 - 成功后用
Array.map()生成字符串，再赋给document.getElementById('main-nav').innerHTML，比逐个appendChild快且不易出错 - 加个
.catch()，至少console.error('菜单加载失败', err)，不然本地测试时 404 静默失败，你还在查 JS 语法
示例片段（放在 </body> 前）：
fetch('./menu.json')
.then(r => r.json())
.then(menu => {
const html = menu.map(item =>
`<a href="https://www.php.cn/link/907353eab452f43367a8c29311399935">${item.label}</a>`
).join('');
document.getElementById('main-nav').innerHTML = html;
})
.catch(err => console.error('菜单加载失败', err));
点击没反应？检查 base 标签和相对 URL 行为
很多人做完发现点导航跳转到奇怪地址，比如当前页是 http://localhost:8080/about/，点“首页”却跳去 http://localhost:8080/about/ —— 这是相对 URL 被浏览器按当前路径解析了。根本原因常是漏了 <base href="/"> 或用了不带斜杠的 url: "index.html"。
- 在
<head>里加<base href="/">，强制所有相对链接以根目录为基准 - JSON 里的
url字段统一用绝对路径开头（/），例如"/products"，不要"products"或"./products" - 如果项目部署在子路径（如
https://example.com/myapp/），<base>得设成<base href="/myapp/">，且 JSON 中的 URL 仍保持以/myapp/开头
动态菜单要不要支持选中态？class 切换比重绘更轻量
用户打开 /products 页面，对应菜单项应该高亮。别想着每次重新渲染整个菜单，用 CSS class 控制就行。前提是你的页面能知道自己当前路径。
- 用
window.location.pathname获取当前路径（如"/products"），注意它不带查询参数和 hash - 遍历生成的
<a>元素，对比href属性值是否等于当前路径，匹配则加class="active" - 不要在 fetch 回调里做这个判断——因为此时 DOM 还没插入，得等
innerHTML赋值完再查节点 - 如果用的是前端路由（如 hash 模式），改用
window.location.hash并对应 JSON 中的url字段（如"#home"）
补充代码片段（接在上一个 innerHTML = html 后面）：
const currentPath = window.location.pathname;
document.querySelectorAll('#main-nav a').forEach(a => {
if (a.getAttribute('href') === currentPath) {
a.classList.add('active');
}
});
JSON 文件路径、base 标签、路径匹配逻辑这三处最容易漏，改完记得清缓存再试。 
