Question

我有以下链接：

    <a id="readmore" href="#">READ MORE</a>

当用户点击此超链接时，我使用Jquery切换此链接下方的内容以显示/隐藏内容。我对href =“＃”的一个问题是它将用户带到页面顶部。相反，我希望它保持在同一位置，以便我可以在READ MORE超链接下方显示信息的切换效果。是否有一个解决方案可以工作，对大多数浏览者来说都是安全的。我试过href =“”但是没有做到这一点。

我也尝试了

    <a id="readmore"href="javascript:void(0)"> READ MORE</a>

但不确定这是否是最佳做法。

Answer 1

您可以使用

$('#readmore').click(function(e) {
  e.preventDefault();
});

preventDefault（）会停止元素的默认行为，所以在这种情况下，它会停止屏幕跳跃。

详细了解here

Answer 2

一个非常知道的问题是使用javascript:void(0)而不是＃

Answer 3

确保使用e.preventDefault（）; （假设您的事件变量是e）或者只是在点击方法结束时返回false

Answer 4

你也可以使用老派风格......

<a id="readmore" href="javascript:void(0);">Read More</a>

UDPATE

OP修改了他的帖子，包括“最佳实践”......就这样......

Unobtrusive Javascript

Answer 5

在您的代码中，您需要传递一个事件变量并调用preventDefault来阻止锚标记的默认操作。

即

$('#readmore').click(function(e) {
    $('div').toggle();
    e.preventDefault();
}

Answer 6

您也可以使用nohref="nohref"代替href="#"

href="#anchor"带您进入已定义<a></a>的页面上的name="anchor"元素

因为你还没有..它到了顶部

HTML超链接停留在同一位置

6 个答案: