46

在我的网站上，我使用 jQuery 来挂钩元素的事件，即超链接。由于这些超链接仅在当前页面上执行操作，并且不会引导到任何地方，因此我一直将“#”的 href 属性放在：

<a href="#">My Link</a>

但是在某些浏览器中，这会导致页面从右滚动到顶部，这显然是不受欢迎的行为。我试过使用一个空白的href值，或者不包括一个，但是鼠标在悬停时不会变成手形光标。

我应该在里面放什么？

4

12 回答 12

51 
$('a').click(function (event) 
{ 
     event.preventDefault(); 
     //here you can also do all sort of things 
});

然后你可以输入href任何你想要的东西，jQuery 会触发这个preventDefault()方法，你不会被重定向到那个地方。

于 2009-04-06T11:18:13.197 回答
39

那些仅仅为了提供点击事件而存在，但实际上并不链接到其他内容的“锚点”应该是真正的按钮元素，因为它们才是真正的。

它可以这样设计：

<button style="border:none; background:transparent; cursor: pointer;">Click me</button>

当然，点击事件可以附加到按钮上，而无需担心浏览器会跳到顶部，也无需添加无关的 JavaScript，例如 onclick="return false;" 或 event.preventDefault() 。

于 2010-01-27T05:36:29.123 回答
37

你真的应该在那里放一个真正的链接。我不想听起来像个书呆子，但这是一个相当糟糕的习惯。JQuery 和 Ajax 应该始终是您实现的最后一件事。如果您的链接无处可去，则说明您做的不对。

我不是在破坏你的蛋蛋，我的意思是出于好意。

于 2009-04-06T11:13:08.840 回答
11

为什么使用<a href>? 我这样解决它：

<span class='a'>fake link</span>

并使用以下样式对其进行样式设置：

.a {text-decoration:underline; cursor:pointer;}

您可以使用 jQuery 轻松访问它：

$(".a").click();

于 2009-04-06T12:28:13.637 回答
9

将 return false 添加到单击处理程序的末尾，这可以防止发生尝试重定向页面的浏览器默认处理程序：

$('a').click(function() {
// do stuff
return false;
});
于 2009-04-06T11:05:30.840 回答
5

使用 jquery，您可能只想获取带有 '#' 的那些

$('a[href=#]').click(function(){return false;});

如果你使用最新的jquery（1.3.x），页面变化时无需再次绑定：

$('a[href=#]').live('click', function(){return false;});
于 2009-07-20T17:23:45.567 回答
5

你应该使用<a href="javascript:void(0)" ></a> 而不是<a href="#" ></a>

于 2010-01-19T07:05:36.610 回答
4

想知道为什么之前没有人在这里说过：为了防止<a href="#">将文档位置滚动到顶部，只需使用即可<a href="#/">。那只是 HTML，不需要 JQuery。使用event.preventDefault();实在是太多了！

于 2011-12-07T01:56:40.303 回答
1

我知道这很旧，但是哇，有一个简单的解决方案。

完全删除“href”，只需添加一个执行以下操作的类：

.no-href { cursor:pointer: }

就是这样！

于 2010-04-09T11:20:48.607 回答
0

我几乎遇到了这个问题，而且非常具有欺骗性。我正在提供一个答案，以防有人在我同样的位置结束。

  1. 我以为我有这个问题
  2. 但是，我使用的是 return false 和 javascript:void(0);
  3. 然后问题的明显差异不断浮出水面：
  4. 我意识到它并没有一直到顶部——而且我的问题区域靠近页面底部，所以这个跳转很奇怪而且很烦人。
  5. 我意识到我正在使用fadeIn() [jQuery library]，在短时间内我的内容是 display:none
  6. 然后我的内容扩大了页面的范围！导致看起来像跳跃！
  7. 现在使用可见性隐藏切换..

希望这可以帮助陷入跳跃的人！

于 2014-07-08T04:30:13.310 回答
-1

相反，您可以简单地使用如下所示的 href：

<a href="javascript:;">My Link</a>

它不会滚动到顶部。

于 2010-10-19T07:34:14.370 回答
-1 
<a href="#nogo">My Link</a>
于 2010-10-31T00:42:10.937 回答