核心是根据url路径或点击事件精准定位并更新导航项active状态：先清除所有active，再用queryselector依data-path、href等属性找到目标元素并添加active类。
用 querySelector 切换导航栏激活状态，核心不是“选中哪个元素”，而是“根据当前页面或用户操作，精准定位并更新对应菜单项的 class（比如 active）”。关键在逻辑判断 + 一次准确选择 + 状态重置。
明确激活依据：URL 路径 or 点击事件？
先想清楚“什么时候该切换”——常见两种场景：
-
页面加载时自动匹配：根据浏览器地址栏的 URL（如
window.location.pathname），找出对应导航项并加active -
点击时手动切换：用户点某个
@#@#@#@#@#@#@#@#@#@0<br> @#@#@#@#@#@#@#@#@#@1<br> @#@#@#@#@#@#@#@#@#@2<br><p>JS 实现：</p> <font face="monospace">document.querySelectorAll('nav a').forEach(link => {<br> link.addEventListener('click', function(e) {<br> // 阻止默认跳转（可选）<br> e.preventDefault();<br> // 清空所有 active<br> document.querySelectorAll('nav a.active').forEach(el => el.classList.remove('active'));<br> // 给当前点击项加 active<br> this.classList.add('active');<br> });<br> });</font> <p>如果是 URL 匹配，把 <code>this换成document.querySelector(`nav a[href="${window.location.hash}"]`)即可。
