jQuery超链接 - href值?

时间:2009-04-06 10:59:43

标签: jquery hyperlink href

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

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

然而,在某些浏览器中,这会导致页面从右向上滚动,这显然是不合需要的行为。我尝试使用空白href值,或者不包括一个,但是鼠标在悬停时不会更改为手形光标。

我应该把它放在那里?

12 个答案:

答案 0 :(得分:51)

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

然后你可以随心所欲地输入每个href,jQuery将触发preventDefault()方法,你不会被重定向到那个地方。

答案 1 :(得分:39)

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

它的样式可以这样:

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

当然点击事件可以附加到按钮而不用担心浏览器跳到顶部,并且不添加无关的javascript,例如onclick =“return false;”或event.preventDefault()。

答案 2 :(得分:36)

你应该在那里放一个真正的链接。我不想听起来像一个学究,但这是一个相当不好的习惯。 JQuery和Ajax应该永远是你实现的最后一件事。如果你有一个无处可去的链接,那么你做得不对。

我没有破坏你的球,我的意思是说有最好的意图。

答案 3 :(得分:11)

为什么要使用<a href>?我这样解决:

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

并将其设为:

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

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

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

答案 4 :(得分:9)

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

$('a').click(function() {
// do stuff
return false;
});

答案 5 :(得分:5)

使用jquery,您可能只希望获得带有'#'

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

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

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

答案 6 :(得分:4)

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

答案 7 :(得分:3)

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

答案 8 :(得分:1)

我知道这已经过时了但哇,这是一个简单的解决方案。

完全删除“href”并添加一个执行以下操作的类:

.no-href { cursor:pointer: }

就是这样!

答案 9 :(得分:0)

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

  1. 我有这个问题
  2. 但是,我使用的是return false和javascript:void(0);
  3. 然后问题的明显差异不断出现:
  4. 我意识到它并没有一路走到顶端 - 我的问题区域靠近页面的底部,所以这个跳转很奇怪而烦人。
  5. 我意识到我正在使用fadeIn()[jQuery库],我的内容很快就显示出来了:none
  6. 然后我的内容扩展了页面的范围!导致什么看起来像一个跳跃!
  7. 现在使用隐藏可见性切换..
  8. 希望这可以帮助那些坚持跳跃的人!!

答案 10 :(得分:-1)

相反,你可以简单地使用如下的href:

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

它不会滚动到顶部。

答案 11 :(得分:-2)

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