jQuery超链接 – href值?
在我的网站上,我使用jQuery钩住元素的事件,即超链接。 由于这些超链接只在当前页面上执行操作,并且不会导致任何地方,所以我一直在将“#”的href属性放在:
<a href="#">My Link</a>
然而,在一些浏览器中,这会导致页面向右滚动到顶部,这显然是不受欢迎的行为。 我试过使用一个空白的href值,或不包括一个,但然后鼠标hover时不会更改为手形光标。
我应该在那里放什么?
$('a').click(function (event) { event.preventDefault(); //here you can also do all sort of things });
然后,你可以把你想要的每一个href
,jQuery将触发preventDefault()
方法,你不会被redirect到那个地方。
那些仅仅是为了提供点击事件而不是实际链接到其他内容的“锚”应该真的是button元素,因为这就是他们真正的内容。
它可以像这样的风格:
<button style="border:none; background:transparent; cursor: pointer;">Click me</button>
当然点击事件可以附加到button上,而不必担心浏览器跳到顶部,并且不会添加无关的javascript,例如onclick =“return false;” 或event.preventDefault()。
你真的应该把一个真正的联系在那里。 我不想听起来像一个僧侣,但这是一个相当不好的习惯进入。 JQuery和Ajax应该始终是你实现的最后一件事情。 如果你有一个不在哪里的链接,你做得不对。
我不是在打你的球,我的意思是说,尽全力。
为什么使用<a href>
? 我解决这个问题:
<span class='a'>fake link</span>
它的风格与:
.a {text-decoration:underline; cursor:pointer;}
您可以使用jQuery轻松访问它:
$(".a").click();
添加返回false到您的点击处理程序的末尾,这可以防止浏览器默认处理程序发生,试图redirect页面:
$('a').click(function() { // do stuff return false; });
使用jQuery,你可能只想得到那些与'#'
$('a[href=#]').click(function(){return false;});
如果你使用最新的jQuery(1.3.x),当页面改变时不需要再绑定它:
$('a[href=#]').live('click', function(){return false;});
您应该使用<a href="javascript:void(0)" ></a>
而不是<a href="#" ></a>
想知道为什么之前没有人在这里说过:为防止<a href="#">
文档位置滚动到顶端,只需使用<a href="#/">
。 这仅仅是HTML,不需要JQuery。 使用event.preventDefault();
太多了!
我知道这是旧的,但哇,有这样一个简单的解决scheme。
完全删除“href”,只需添加一个具有以下function的类:
.no-href { cursor:pointer: }
而就是这样!
我几乎有这个问题 ,这是非常欺骗 。 如果有人遇到同样的情况,我正在提供一个答案。
- 我以为我有这个问题
- 但是,我使用的是返回false和javascript:void(0);
- 然后,问题上的明显差异一直浮出水面:
- 我意识到这不是一路走到最前面 – 我的问题区域接近页面的底部,所以这个跳跃很奇怪,很烦人。
- 我意识到我正在使用fadeIn()[jQuery库],很短的时间我的内容显示:无
- 然后我的内容扩大了页面的范围! 造成看起来像一个跳跃!
- 隐藏可见性切换现在..
希望这有助于人坚持跳!
相反,你可以简单地有如下的href:
<a href="javascript:;">My Link</a>
它不会滚动到顶部。
<a href="#nogo">My Link</a>