如何防止点击“#”链接跳转到页面顶部?

我目前使用jQuery的<a>标签来启动像点击事件等事情。

例如<a href="#" class="someclass">Text</a>

但我讨厌“#”使页面跳转到页面顶部。我能做什么呢?

当前回答

如果你想使用一个锚，你可以像其他答案一样使用http://api.jquery.com/event.preventDefault/。

您还可以使用任何其他元素，如span，并将单击事件附加到它。

$("span.clickable").click(function(){
alert('Yeah I was clicked');
});

其他回答

你也可以在处理jquery后返回false。

Eg.

$(".clickableAnchor").live(
    "click",
    function(){
        //your code
        return false; //<- prevents redirect to href address
    }
);

如果元素没有有意义的href值，那么它就不是真正的链接，那么为什么不使用其他元素呢?

正如Neothor所建议的那样，如果样式正确，span将作为一个可以点击的项目而显而易见。你甚至可以附加一个悬停事件，让元素在用户鼠标移动时“亮起”。

然而，话虽如此，你可能想要重新考虑你的网站的设计，这样它就可以在没有javascript的情况下运行，但在有javascript时可以通过javascript进行增强。

如果你想使用一个锚，你可以像其他答案一样使用http://api.jquery.com/event.preventDefault/。

您还可以使用任何其他元素，如span，并将单击事件附加到它。

$("span.clickable").click(function(){
alert('Yeah I was clicked');
});

我用过:

<a href="javascript://nop/" class="someClass">Text</a>

解决方案#1:(普通)

<a href="#!" class="someclass">Text</a>

解决方案#2:(需要javascript)

<a href="javascript:void(0);" class="someclass">Text</a>

解决方案#3:(需要jQuery)

<a href="#" class="someclass">Text</a>
<script>
$('a.someclass').click(function(e) {
    e.preventDefault();
});
</script>

推荐文章