HTML超链接保持在同一位置

Question

我有以下链接：

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

当用户单击此超链接时，我使用Jquery来切换该链接下方的内容以显示/隐藏内容。我对href="#"的一个问题是它会将用户带到页面顶部。相反，我想让它停留在同一位置，这样我就可以显示READ MORE超链接下方信息的切换效果。是否有一种适用于大多数浏览器的解决方案？我尝试了href=""但无效。

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

但我不确定这是否是最佳实践。

- Nate Pet

Answer 1

您可以使用

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

可以阻止元素的默认行为，因此在这种情况下，它将停止屏幕跳动。

在此处阅读更多信息。

- alimac83

Answer 2

一个非常普遍的问题是使用 javascript:void(0) 代替 #。

- sayannayas

Answer 3

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

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

更新

楼主修改了他的帖子并包括了“最佳实践”...因此...

不显眼的JavaScript

- Edward J Beckett

---

只是一个注意事项，这种方式已不再推荐，内联JS会导致代码难以维护。如果你有一百个链接，这会变得非常混乱。 - aziz punjani

是的...这就是为什么我使用了“老派”的免责声明... :-) - Edward J Beckett

Answer 4

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

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

- munnster79

Answer 5

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

- Bryan

---

实际上，您想要阻止默认操作而不是停止传播。 - aziz punjani

对不起，这么久以来你是完全正确的，我通常只会返回 false。 - Bryan

Answer 6

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

href="#anchor"会带你到页面上定义了name="anchor"的<a></a>元素处

但由于你没有定义，它会跳转到页面顶部

- Wampie Driessen