如何让 JavaScript 动态菜单中的链接正常跳转并正确高亮当前页面-js教程-PHP中文网

如何让 JavaScript 动态菜单中的链接正常跳转并正确高亮当前页面

本文解决动态生成导航链接后点击无跳转的问题，核心在于避免误用 preventDefault()；同时介绍如何在页面加载时自动识别并高亮当前激活项，确保导航功能与用户体验一致。

本文解决动态生成导航链接后点击无跳转的问题，核心在于避免误用 `preventdefault()`；同时介绍如何在页面加载时自动识别并高亮当前激活项，确保导航功能与用户体验一致。

在使用 JavaScript 构建动态导航菜单时，一个常见误区是：为实现“点击高亮”效果而在 <a></a> 元素的 click 事件中调用 e.preventDefault() —— 这会完全阻止默认跳转行为，导致 href 失效。而真正的导航需求恰恰是：既要能跳转到目标页面，又要在目标页上自动标记对应菜单项为 active。

✅ 正确思路：分离“交互逻辑”与“状态同步”

不要在点击时阻止跳转（即移除 e.preventDefault()）；
改在页面加载时（DOMContentLoaded）自动判断当前 URL，匹配对应菜单项并添加 active 类；
所有链接应通过 setAttribute('href', url) 正确设置目标路径，且 HTML 中 <a></a> 标签需直接作为可点击元素（而非包裹在 <li> 内却未绑定事件的“伪链接”）。

✅ 推荐实现代码

document.addEventListener('DOMContentLoaded', () => {
  const menuLinks = document.querySelectorAll('.list-item');
  const pageNames = ['Home', 'About', 'Contact', 'Projects'];

  menuLinks.forEach((link, index) => {
    const name = pageNames[index];
    const targetUrl = `${name.toLowerCase()}.html`;

    // 设置文本和 href（注意：此处不设 href="#"，而是真实路径）
    link.textContent = name;
    link.setAttribute('href', targetUrl);

    // 根据当前页面路径自动激活：/about.html → 匹配 'about.html'
    const isActive = location.pathname.endsWith(targetUrl);
    link.classList.toggle('active', isActive);
  });
});

✅ HTML 结构建议（语义清晰、便于选择）

? 关键提示：

Alibabacloud Sdk Client Initialization For Java
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

变量命名应准确反映 DOM 元素类型（如 menuLinks 优于 li，link 优于 elementul），提升可维护性；

location.pathname 返回当前 URL 的路径部分（如 /about.html），使用 endsWith() 比正则更简洁安全；

页面间跳转本质是全新上下文加载，JS 不会“持续运行”，因此状态必须在每个页面独立初始化 —— 这正是 DOMContentLoaded 钩子的作用。