jQuery超链接-href值?

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

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

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

我应该在那放什么?

Tom asked 2020-06-29T21:43:52Z
12个解决方案
51 votes
$('a').click(function (event) 
{ 
     event.preventDefault(); 
     //here you can also do all sort of things 
});

然后,您可以在每个href中放入所需的任何内容,而jQuery将触发preventDefault()方法,并且不会将您重定向到该位置。

Bogdan Constantinescu answered 2020-06-29T21:44:07Z
39 votes

那些仅用于提供单击事件但实际上并未链接到其他内容的“锚点”实际上应该是按钮元素,因为这就是它们的真正含义。

可以这样设置样式:

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

当然,单击事件可以附加到按钮上,而不必担心浏览器跳到顶部,也不需要添加多余的JavaScript,例如onclick =“ return false;”。 或event.preventDefault()。

talentedmrjones answered 2020-06-29T21:44:36Z
36 votes

您应该真正在其中放置一个真正的链接。 我不想听起来像个书呆子,但这是一个相当不好的习惯。 JQuery和Ajax应该始终是您实现的最后一件事。 如果您的链接无处可去,则说明操作不正确。

我不会破坏您的球,我的意思是尽一切努力。

gargantuan answered 2020-06-29T21:45:01Z
11 votes

为什么要使用$(".a").click();? 我这样解决:

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

并使用以下样式设置样式:

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

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

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

bart answered 2020-06-29T21:45:30Z
9 votes

在您的点击处理程序的末尾添加return false,这可以防止发生浏览器默认处理程序试图重定向页面的情况:

$('a').click(function() {
// do stuff
return false;
});
roryf answered 2020-06-29T21:45:50Z
5 votes

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

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

如果您使用最新的jquery(1.3.x),则在页面更改时无需再次绑定它:

$('a[href=#]').live('click', function(){return false;});
djspark answered 2020-06-29T21:46:14Z
4 votes

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

mohsen answered 2020-06-29T21:46:34Z
3 votes

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

Best answered 2020-06-29T21:46:54Z
1 votes

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

完全删除“ href”,然后添加执行以下操作的类:

.no-href { cursor:pointer: }

就是这样!

Justin answered 2020-06-29T21:47:23Z
0 votes

我差点就遇到了这个问题,这很容易欺骗。 我提供答案,以防有人跳到我的相同位置。

  1. 我以为我有这个问题
  2. 但是,我正在使用return false和javascript:void(0);。
  3. 然后,问题的明显区别不断出现:
  4. 我意识到它并没有一直到顶部-我的问题区域在页面底部附近,所以这种跳转很奇怪而且很烦人。
  5. 我意识到我正在使用fadeIn()[jQuery库],短时间内显示了我的内容:无
  6. 然后,我的内容扩展了页面的范围! 造成什么看起来像跳!
  7. 现在使用隐藏可见性切换。

希望这可以帮助跳下去的人!!

amurrell answered 2020-06-29T21:48:18Z
-1 votes

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

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

它不会滚动到顶部。

Pratik Thakkar answered 2020-06-29T21:48:42Z
-2 votes
<a href="#nogo">My Link</a>
Dotcream answered 2020-06-29T21:48:58Z
translate from https://stackoverflow.com:/questions/720970/jquery-hyperlinks-href-value