【问题标题】:Jquery : drop down menu causes page to jump to the topJquery:下拉菜单导致页面跳转到顶部
【发布时间】:2011-11-16 04:20:26
【问题描述】:

我在“更多”链接上有一个下拉菜单,但是如果您在单击固定位置菜单“更多”时在页面中向下滚动,页面会自动跳转到顶部。为什么是这样?我可以改变这个吗?非常感谢

http://jsfiddle.net/rKaPN/61/

编辑:我已将链接从 href="#" 更改为 href="www.google.com",因为我希望有一个链接以防 js 无法加载。还添加 return false 导致我在 ul 中的所有链接都中断。有什么想法吗?

【问题讨论】:

  • 如果您不打算在 href 中放置实际的 url,您也可以使用任何其他元素,例如 span。
  • 谢谢我现在放一个 url 以防没有 jquery 支持

标签: jquery html css


【解决方案1】:

只需从链接中删除 href="#" 部分,这就是导致它的原因,并且不需要它,因为您已经获得了 onClick 事件。

【讨论】:

  • 不要删除href。这是一个必需的属性。
  • 错误。 href 是可选的。好像您从未使用过锚点作为导航项:)
  • 在这种情况下,您可以只使用跨度。但最常见的是使用a,因为它实际上链接到一个有用的页面,以防客户端不支持精美的菜单。对此表示反对。 AlienWebguy 提供了正确答案。
  • @Alfabravo 看来你是对的先生:Authors may also create an A element that specifies no anchors, i.e., that doesn't specify href, name, or id. Values for these attributes may be set at a later time through scripts. via w3.org/TR/html4/struct/links.html
  • @GolezTrol 跨度是跨度,在 html 文档中具有含义,锚点是锚点,它不需要链接到有用的页面 :) 请像 AlienWebguy 一样检查规范。好问题,不过!
【解决方案2】:

在您的代码中,在event.stopPropagation(); 之后添加event.preventDefault();

http://jsfiddle.net/AlienWebguy/rKaPN/52/

编辑:

根据您的评论,如果您想在导航中混合使用非链接和 url 链接,只需为活动链接提供 class="link"。然后在您的代码中,您将使用条件来阻止默认事件:

  if($(this).hasClass('link')){
      window.location = $(this).attr('href');
  }
  else {
      event.stopPropagation();
      event.preventDefault();
  }

【讨论】:

【解决方案3】:

详细说明 RobinJ 的回答:

这里跳到顶部的原因是哈希用于页面锚定。这意味着将视图定位在特定锚的名称处。如果您使用没有引用锚名称的哈希,默认情况下屏幕将锚定到页面顶部。

当在锚点上使用 javascript 来执行不涉及移动屏幕或请求新 URL 的操作时,您通常根本不需要输入 href 属性。很多人似乎认为<a> 需要这个,但实际上不需要。

【讨论】:

    【解决方案4】:

    详细说明 RobinJ 的回答:

    这里跳到顶部的原因是哈希用于页面锚定。这意味着将视图定位在特定锚点的名称处。如果您使用没有引用锚名称的哈希,默认情况下屏幕将锚定到页面顶部。

    有一些方法可以解决这个问题,但我个人跳过添加 href 属性。

    【讨论】:

      【解决方案5】:

      页面跳转,因为链接将您重定向到“#”,您可以添加 return false; 作为处理 onclick 事件的代码的最后一条语句...,这应该可以解决您的问题。

      【讨论】:

      • 这样做会导致 .menu ul li ul 中的链接不起作用
      • 如果您按下链接以显示菜单,那么您不希望链接工作。
      【解决方案6】:

      对于 onclick 事件,您可以返回值,例如 onclick="return someFunction()"

      如果 someFunction 返回 false 值,它将不会跟随链接。

      在这种情况下,它将忽略 #。如果你在那里有一个 URL,它同样会忽略它。

      在您的情况下,由于您使用 jquery 绑定,您可以在函数末尾返回 false:

      menu.find('ul li > a').bind('click',function (event) {
      ...
      return false;
      }
      

      方法 event.preventDefault() 也可以做到这一点,但很高兴知道您可以返回 false 让浏览器停止事件。

      【讨论】:

      • 嗨,添加这个会导致我的链接在我的下拉菜单中不起作用,有什么想法吗?
      • 如果您阅读我的解释,您会看到答案,但感谢您的反对。
      • 谢谢,我实际上并没有对你投反对票。在我获得 125 个代表点之前我不能投反对票。
      • 好的,抱歉。好吧,只有在单击包含下拉列表的项目时,您才需要返回 false。因此,不要在查找结束时返回 false,而是在 if 语句结束时返回 false,您可以在其中检查它是否正在切换下拉菜单。在其他情况下你不需要返回任何东西,或者你可以返回 true。
      【解决方案7】:

      href="#" 替换为href="javascript:void(0);"

      【讨论】:

      • 永远不要将javascript放在href属性中!这就是 onClick 的意义所在!
      • 因为将 ui/display 代码与事件代码分开是一种更好的遵循模式,因为它便于维护等。 +1 询问“为什么不”
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-06-22
      • 1970-01-01
      相关资源
      最近更新 更多