Question

我有一个简单的点击和显示，点击并隐藏按钮，但当我点击它时，页面锚定在页面顶部。反正有没有阻止这个？那么当我点击按钮时，我会在浏览器中停留在同一个地方？

我的代码是..

$('#reportThis').hide();

$('#flagThis').click(function () {
    $('#reportThis').show("slow");
});
$('#submitFlag').click(function () {
    $('#reportThis').hide("slow");
});

Answer 1

试试这个：

$('#reportThis').hide();

$('#flagThis').click(function (evt) {
        $('#reportThis').show("slow");
        evt.preventDefault();
});
$('#submitFlag').click(function (evt) {
        $('#reportThis').hide("slow");
        evt.preventDefault();
});

Answer 2

您可能会将此次点击绑定到＆lt; a＆gt;标签，其中包含默认操作。为防止这种情况，您可以使用其他标记，例如＆lt; div＆gt;或者你可以这样做：

$('#flagThis').click(function (event) {
        $('#reportThis').show("slow");
        event.preventDefault();
});

Answer 3

尝试在false函数中返回click：

$('#reportThis').hide();

$('#flagThis').click(function () {
        $('#reportThis').show("slow");
        return false;
});
$('#submitFlag').click(function () {
        $('#reportThis').hide("slow");
        return false;
});

Answer 4

将超链接更改为指向不存在的锚点，如下所示：

<a href="#IDontExist" id="flagThis">Flag</a>

或者，让处理程序返回false，如下所示：

$('#reportThis').hide();

$('#flagThis').click(function () {
    $('#reportThis').show("slow");
    return false;
});
$('#submitFlag').click(function () {
    $('#reportThis').hide("slow");
    return false;
});

Answer 5

如果您使用的是button2元素，请不要忘记设置type属性。

<button>

某些浏览器默认提交，会将您带回页面的开头。

无论如何，这是我出错的地方，在这里什么也没看到，所以我想为未来的读者分享我的两分钱。

jQuery click让我回到页面顶部。但我想留在原地

5 个答案: