如何修复 HTML 页面间跳转失效的问题-html教程-PHP中文网

如何修复 HTML 页面间跳转失效的问题

页面导航链接点击后无法跳转到 about.html 或 stocks.html，根本原因是 JavaScript 中对所有标签的 click 事件调用了 e.preventDefault()，无差别阻止了默认跳转行为，导致外部页面链接失效。

页面导航链接点击后无法跳转到 about.html 或 stocks.html，根本原因是 javascript 中对所有 `` 标签的 `click` 事件调用了 `e.preventdefault()`，无差别阻止了默认跳转行为，导致外部页面链接失效。

在你的 script.js 文件中，以下这段代码是问题的核心：

const allLinks = document.querySelectorAll("a:link");

allLinks.forEach(function(link) {
  link.addEventListener("click", function(e) {
    e.preventDefault(); // ⚠️ 问题根源：此处阻止了所有链接的默认行为！
    const href = link.getAttribute("href");

    // Scroll back to top
    if (href === "https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b")
      window.scrollTo({ top: 0, behavior: "smooth" });

    // Scroll to other links (e.g., https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bsection)
    if (href !== "https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" && href.startsWith("https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b")) {
      const sectionEl = document.querySelector(href);
      if (sectionEl) sectionEl.scrollIntoView({ behavior: "smooth" });
    }

    // Close mobile navigation
    if (link.classList.contains("main-nav-link"))
      headerEl.classList.toggle("nav-open");
  });
});

该逻辑本意是为锚点跳转（如 https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15babout）和页面内平滑滚动提供支持，但 e.preventDefault() 被应用于所有匹配 a:link 的链接——包括指向 about.html、stocks.html 等真实 HTML 页面的外部链接。一旦执行 preventDefault()，浏览器就不再触发页面跳转，因此你始终卡在 index.html。

✅ 正确做法是：仅对需要平滑滚动的内部锚点链接阻止默认行为，而放行指向其他 HTML 页面的真实 URL 链接。

✅ 修复方案（推荐）

修改事件监听逻辑，精准判断链接类型：

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

const allLinks = document.querySelectorAll("a:link");

allLinks.forEach(function(link) {
  link.addEventListener("click", function(e) {
    const href = link.getAttribute("href");

    // ✅ 情况1：空链接或纯锚点（如 href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" 或 href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bsection"）→ 执行平滑滚动，阻止默认
    if (href === "https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" || (href && href.startsWith("https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b"))) {
      e.preventDefault();
      if (href === "https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b") {
        window.scrollTo({ top: 0, behavior: "smooth" });
      } else {
        const targetSection = document.querySelector(href);
        if (targetSection) {
          targetSection.scrollIntoView({ behavior: "smooth" });
        }
      }
    }
    // ✅ 情况2：指向外部 HTML 文件（如 "about.html", "stocks.html"）→ 允许默认跳转，不阻止
    // ✅ 情况3：绝对 URL（如 "https://example.com"）→ 同样允许默认跳转

    // ✅ 关闭移动端菜单（仅对导航链接生效，不影响跳转）
    if (link.classList.contains("main-nav-link") || link.classList.contains("footer-link")) {
      headerEl?.classList.remove("nav-open");
    }
  });
});

? 补充说明：headerEl?.classList.remove("nav-open") 使用可选链（?.）更安全；也可保留 toggle，但建议跳转前统一关闭，避免状态残留。

⚠️ 额外重要检查项

HTML 中错误的标签
你在
中误将页面文件当作样式表引入：
```
<link rel="stylesheet" href="about.html"><link rel="stylesheet" href="stocks.html">
```
这会导致浏览器尝试加载 HTML 文件作为 CSS，可能引发控制台警告甚至阻塞渲染。请立即删除。
确保文件路径正确且同目录
确认 about.html 和 stocks.html 与 index.html 处于同一级目录，并拼写完全一致（区分大小写，尤其在服务器环境）。

避免重复加载样式表
你同时引入了：

<link href="style.css" rel="stylesheet" type="text/css"><link rel="stylesheet" href="css/style.css"><link rel="stylesheet" href="css/general.css"><link rel="stylesheet" href="css/queries.css">

请检查 style.css 是否已包含 css/ 下所有样式，避免冗余或冲突。