jquery - JQuery ToggleClass 和浏览器切换

Question

我有一个非常简单的toggleClass，它可以在单击时更改链接的外观。除了一件事外，效果很好。每次我单击链接时，浏览器焦点都会右移回到页面顶部。如果链接位于页面的最底部，这会很烦人。

我可以使用另一个元素，例如粗略的跨度，但我很想知道我的问题是否有解决方案。

使用的示例链接：

<a class="share-this" href="#">Share This</a>

score 2 · Accepted Answer

当您单击链接时，它将转到 href 中指定的“#”，这就是将您的屏幕带到顶部的原因。

您需要做的是阻止此默认浏览器操作。您可以通过处理单击事件并防止它冒泡（然后浏览器将处理）来做到这一点。

您可以像这样阻止默认的单击操作：

$('.share-this').toggleClass('some-class-that-is-toggled').click(function(e) {
    e.preventDefault();
});

score 1 · Accepted Answer

如果您不去任何地方，为什么要使用链接？只需将切换代码添加到其他元素类型即可。它不仅可以避免变通，而且在语义上更正确，维护也更清晰。

score 1 · Accepted Answer

或者此功能也可能有所帮助：

$('.share-this').toggleClass('some-class-that-is-toggled').click(function(e) {
    return false;
});

score 0 · Accepted Answer

解决方案 -->

<a class="share-this" href="javascript:void(0);">Share This</a>

这是因为 href="#" use "javascript:void(0);" 代替＃。

它还会更改您的网址，例如

4 回答 4