怎样在点击锚点链接时防止页面滚动到顶部?

3
我有一堆带有类的 div 元素,触发了 jQuery 的点击函数。
为了在鼠标悬停时显示手形光标,这些 div 元素中只放了这个。
<a href="#"></a>

问题是,当点击时页面滚动到顶部(这很合理)。

有什么方法可以在鼠标悬停时使手形光标出现而不导致页面跳转到顶部呢?

谢谢大家。


1
http://api.jquery.com/event.preventdefault/ - CBroe
谢谢CBroe - 这个方法很有效,让它变得更加易用了。 - Shaun
2个回答

4

您可以使用如下所示的javascript:void()来代替#

<a href="javascript:void()">▼</a>


3

不要使用锚点标签,而是设置style="cursor:pointer;"。


干杯 dcc。所以我是把<a href="#"></a>从<div class="expFold"><a href="#">▼</a></div>整个删除掉,还是只去掉#号?我尝试将链接整个删除,但是现在$('#mainDiv').on('click', '.expFold', function (event)就不起作用了。 - Shaun
我会完全删除锚标签,因为它是不必要的标记。将style="cursor:pointer;"放在您的div标签上。或者更好的方法是,在CSS中使用.expFold { cursor:pointer;},以保持您的标记干净,因为您已经分配了类。如果没有锚标签不起作用,则可能是您的Javascript中出现错误。如果您想在问题中发布您的Javascript代码,我会查看它。 - davidcondrey
1
谢谢 dcc - 我忘记从我的点击函数中删除“a”引用了 - 它依赖于锚点。我把它们都去掉了,现在它运行得很好!感谢你的帮助。我会采纳你的答案,因为这将意味着在整个项目中减少代码量 - 我有很多div可以通过剥离锚点来实现相同的效果。 - Shaun
你也在最小化可用性 - 如果你只是使用任意带有cursor:pointer的元素,那么这个元素可能很容易通过鼠标点击,但对于使用键盘浏览页面的用户来说将无法使用。(是的,你可以再次使用tabindex进行修复,但对于应该触发某个特定操作的可点击内容,使用a元素是完全可以的。) - CBroe

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接