3

我有以下链接：

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

当用户单击此超链接时，我正在使用 Jquery 来切换此链接下方的内容以显示/隐藏内容。我对 href="#" 的一个问题是它会将用户带到页面顶部。相反，我希望它保持在同一位置，以便我可以在 READ MORE 超链接下方显示信息的切换效果。有没有一种对大多数浏览器有效且安全的解决方案。我试过 href="" 但这并没有成功。

我也试过

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

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

4

6 回答 6

7

您可以使用

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

preventDefault() 停止元素的默认行为，因此在这种情况下，它将停止屏幕跳转。

在此处阅读有关它的更多信息

于 2012-11-01T16:12:05.823 回答
3

一个非常熟悉的问题使用javascript:void(0)而不是#

于 2012-11-01T16:14:16.330 回答
0

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

于 2012-11-01T16:11:49.523 回答
0

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

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

UDPATE

OP修改了他的帖子以包括“最佳实践”......因此......

不显眼的 Javascript

于 2012-11-01T16:13:16.717 回答
0

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

IE

$('#readmore').click(function(e) {
    $('div').toggle();
    e.preventDefault();
}
于 2012-11-01T16:13:42.813 回答
0

你也可以使用nohref="nohref"而不是href="#"

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

既然你没有..它去了顶部

于 2012-11-01T16:16:47.567 回答