如何修复 HTML 页面无法跳转到其他页面的问题-html教程-PHP中文网

如何修复 HTML 页面无法跳转到其他页面的问题

点击导航链接时页面不跳转，根本原因是 JavaScript 中对标签事件调用了 e.preventDefault()，阻止了默认的页面跳转行为；移除该语句或仅对锚点链接（#）应用该逻辑即可恢复正常导航。

点击导航链接时页面不跳转，根本原因是 javascript 中对 `` 标签事件调用了 `e.preventdefault()`，阻止了默认的页面跳转行为；移除该语句或仅对锚点链接（`#`）应用该逻辑即可恢复正常导航。

在你的项目中，index.html、https://www.php.cn/link/d2355b49a705dfe566550879b6a9754e 和 stocks.html 是三个独立的 HTML 文件，期望通过这类链接实现跨页跳转——这是标准的静态网站导航方式。然而，当前 JS 脚本中存在一个关键问题：

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

    // 后续逻辑仅处理 # 锚点滚动，但未放行外部页面跳转
    if (href === "#") {
      window.scrollTo({ top: 0, behavior: "smooth" });
    }
    if (href !== "#" && href.startsWith("#")) {
      const sectionEl = document.querySelector(href);
      sectionEl.scrollIntoView({ behavior: "smooth" });
    }
    if (link.classList.contains("main-nav-link"))
      headerEl.classList.toggle("nav-open");
  });
});

✅ 问题定位：e.preventDefault() 被应用于所有匹配 a:link 的链接（包括 https://www.php.cn/link/d2355b49a705dfe566550879b6a9754e 和 stocks.html），导致浏览器完全忽略的原生跳转逻辑。

? 解决方案：仅对需要平滑滚动的锚点链接（即以 # 开头的内部跳转）调用 e.preventDefault()，而让外部 HTML 页面链接自然触发导航：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

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

    // ✅ 仅当是锚点跳转（# 或 #section）时阻止默认行为
    if (href && (href === "#" || href.startsWith("#"))) {
      e.preventDefault();

      if (href === "#") {
        window.scrollTo({ top: 0, behavior: "smooth" });
      } else {
        const sectionEl = document.querySelector(href);
        if (sectionEl) {
          sectionEl.scrollIntoView({ behavior: "smooth" });
        }
      }
    }
    // ❌ 不再阻止 href 指向 .html 文件的链接（如 "https://www.php.cn/link/d2355b49a705dfe566550879b6a9754e"），浏览器将正常加载新页面

    // 移动端菜单关闭逻辑保持不变（仅对导航链接生效）
    if (link.classList.contains("main-nav-link")) {
      headerEl.classList.toggle("nav-open");
    }
  });
});

? 额外检查项（确保万无一失）：

✅ 所有 .html 文件（https://www.php.cn/link/d2355b49a705dfe566550879b6a9754e、stocks.html）与 index.html 位于同一目录下，路径正确；

✅ HTML 中标签不能用于引入其他 HTML 文件（你当前的是非法且有害的，会引发解析错误或安全警告，请立即删除）：

<!-- ❌ 错误示例（删除以下两行） -->
<link rel="stylesheet" href="https://www.php.cn/link/d2355b49a705dfe566550879b6a9754e"><link rel="stylesheet" href="stocks.html">

✅ 确保标签的 href 值准确无误（区分大小写、无多余空格），例如：

<a href="https://www.php.cn/link/d2355b49a705dfe566550879b6a9754e" class="main-nav-link">About</a>

? 小贴士：若未来需实现单页应用（SPA）式无刷新切换，应使用 fetch() + 动态 DOM 替换，而非依赖 e.preventDefault() 阻断多页跳转——二者设计目标截然不同。

修正后，点击「About」或「Stocks」链接将立即加载对应 HTML 页面，彻底解决“卡在 index.html”的问题。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！