如何修复 JavaScript 导航菜单中点击链接不跳转的问题-js教程-PHP中文网

如何修复 JavaScript 导航菜单中点击链接不跳转的问题

调用 event.preventDefault() 阻止了默认跳转行为，导致 href 无法生效；正确做法是在页面加载时根据当前 URL 自动标记 active 状态，而非依赖点击事件控制跳转。

调用 `event.preventdefault()` 阻止了默认跳转行为，导致 href 无法生效；正确做法是在页面加载时根据当前 url 自动标记 active 状态，而非依赖点击事件控制跳转。

在构建基于纯 HTML + JavaScript 的静态导航菜单时，一个常见误区是：为 <a></a> 元素动态设置 href 后，又在点击事件中调用 e.preventDefault() —— 这会彻底禁用链接的导航功能。正如示例代码所示，虽然成功切换了 .active 类，但页面永远不会跳转，因为浏览器的默认行为已被显式阻止。

✅ 正确思路：服务端/路由驱动的 active 状态判断

由于每次点击链接都会触发全新页面加载（即 JS 上下文完全重置），因此“记忆上一个点击项”的客户端状态无法跨页保留。真正可靠的方案是：在每个页面加载时，根据当前 URL 路径（location.pathname）匹配对应菜单项，并自动添加 .active 类。

以下是优化后的完整实现：

Alibabacloud Sdk Client Initialization For Java

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

下载

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

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

  // 设置文本与 href（确保语义正确）
  link.textContent = name;
  link.setAttribute('href', targetPath);

  // 根据当前页面路径自动激活对应菜单项
  const isActive = location.pathname.endsWith(targetPath);
  link.classList.toggle('active', isActive);
});

? HTML 结构建议（保持语义清晰）

⚠️ 注意事项：

不要将 querySelectorAll('.list-item') 的结果命名为 li（易误导为 <li> 元素），推荐使用 menuLinks 或 navLinks；

避免在导航链接上绑定 click + preventDefault() 来模拟“单页效果”，除非你已引入真正的 SPA 路由机制（如 History API 或框架）；

若需高亮首页（如 / 路径），可扩展判断逻辑：location.pathname === '/' && name === 'Home'；

所有 .html 文件必须真实存在且路径正确，否则点击后将返回 404。