我在导航栏中有几个锚元素,它们都应该重定向到其他页面,这些页面是根URL的扩展.因此,例如,我有一个带有href="/登录"的"登录"锚元素.所有这些功能以前都能用--点击时它们会重定向到正确的页面--但在我向导航栏添加了一些新内容后,它们就不起作用了.现在,当我点击锚链接时,没有任何react .自那以后,我删除了所有添加的新内容,但问题仍然存在.

以下是NAV元素的HTML

<header class="header">
  <nav class="nav">
    <ul class="nav__el--list">
      <li><a href="/home">Home</a></li>
      <li><a href="/projects">Projects</a></li>
      <li><a href="/sources">Sources</a></li>
    </ul>
    <div class="header__logo"><img src="/img/header-logo.png" alt="logo" style="height:100%; width:100%"/></div>
    <div class="nav__el--user"> 
        <a class="nav__el nav__el--login" href="/login">Log in</a>
        <a class="nav__el nav__el--cta" href="/signup">Sign up</a>
    </div>
  </nav>
</header>

我采取的故障排除步骤:

  1. 我验证了浏览器识别正确的href--当我将光标悬停在锚元素链接上时,正确的url会显示在浏览器的左下角.

  2. 我验证了锚链接应该重定向到的页面是否正常工作--我是通过在浏览器搜索栏中直接输入URL来实现这一点的

  3. 我验证了浏览器正在注册对锚链接元素的"点击"--我将一个"点击"触发的事件侦听器附加到锚元素,当我点击锚元素时,事件侦听器被触发.

  4. 在Chrome dev工具的"Elements"选项卡中,我找到了锚元素的源HTML,并点击了源代码中的href链接,然后被重定向到正确的页面--但在实际浏览器页面上点击锚元素仍然不起作用

  5. 我打开没有任何CSS的页面,查看是否在样式中有什么东西导致了问题,但即使是在仅有HTML的页面上,当我单击锚元素时也没有任何react

  6. 我清除了浏览器缓存、cookie和历史记录,并重新启动了浏览器,但这并没有解决问题

  7. 我在另一个浏览器上打开了该页面,但这并没有解决问题

如有任何建议,我们将不胜感激!

推荐答案

此问题的一个潜在解决方案是在单击事件侦听器中添加event.preventDefault()个.这将阻止锚元素的默认行为(重定向到href链接),并允许您使用JavaScript手动重定向到正确的页面.

当点击"Log In"链接时,此代码应手动将用户重定向到正确的页面

const loginLink = document.querySelector('.nav__el--login');

loginLink.addEventListener('click', function(event) {
  event.preventDefault();
  window.location.href = "/login";
});

如果这不起作用,可能是其他一些JS代码阻碍了它.

https://www.w3schools.com/js/js_window_location.asp

Html相关问答推荐

HTML表行悬停仅适用于偶数行

react :事件和转发器在特定代码段中不起作用

粘滞的导航栏延伸到超过页边距的右侧

为什么在移动视图中,这个水平可滚动的表格会在表格的右侧显示额外的空间?

这<;td&>如何溢出<;表>;?

如何将CSS滤镜仅应用于背景图像

Bootstrap 5.3.2模式页脚左填充还是左边距?

阴影部分内部的ionic Select 元素

动画的停止和启动并不顺利

CSS 伪类 Select 器未按预期工作

带有图像的虚线边框

下划线在 Bootstrap 5 导航链接下无法正常工作

pull-right 不适用于 bootstrap alert 内的按钮

按钮显示:内联不换行

把标题、段落和图片放在一起

发光效果html动画

是否可以设置用户在联系表单中输入的文本字体的样式

Header 或 P 标记中的填充不能与 em 单元一起正常工作

SVG 适用于 Safari,不适用于 Chrome

表格布局:固定;文本溢出单元格时不起作用