代码之家  ›  专栏  ›  技术社区  ›  abood jbr

链接到另一个html页面不起作用?

  •  0
  • abood jbr  · 技术社区  · 3 年前

    我试图将侧边栏中显示的设置选项卡链接到一个名为(settings.HTML)的新HTML页面,但当我单击设置时,它不会将我引导到(settingshtml)页面。

    settings tab on the sidebar sidebar code

    两个HTML页面都使用相同的外部JavaScript文件,当我从HTML代码中删除JavaScript文件时,我只能从侧边栏导航到设置页面。

    这是GitHub上的网站代码 [https://github.com/Jehad-Sauafth/Dashboard.git]

    1 回复  |  直到 3 年前
        1
  •  0
  •   ingoCollatz    3 年前

    这是因为您的JavaScript正在阻止所有a元素的默认行为。

    把 e.preventDefault() 到if语句中,因此仅针对跳转链接阻止默认行为。

    const allLinks = document.querySelectorAll("a:link");
    
    allLinks.forEach(function (link) {
      link.addEventListener("click", function (e) {
        const href = link.getAttribute("href");
    
        // Scroll back to top
        if (href === "#") { 
          e.preventDefault();
          window.scrollTo({
            top: 0,
            behavior: "smooth",
          });
        }
        //Scroll to other links
        if (href !== "#" && href.startsWith("#")) {
          e.preventDefault();
          const sectionEl = document.querySelector(href);
          sectionEl.scrollIntoView({ behavior: "smooth" });
        }
      });
    });