Javascript 为什么隐藏某些元素后我的页面会刷新？

我有一个页面通过有条件地显示/隐藏某些元素而“伪造”到另一个页面。单击默认情况下显示的两个图像中的任何一个时，它们都将隐藏，并根据单击的图像显示其他元素

在随后显示的元素中，有一个“返回”按钮。单击该按钮时，它将隐藏当前显示的内容（包括其本身），并显示原始的两个图像

它工作，除了页面，在短暂延迟后，“闪烁”（刷新）。为什么，我如何避免这种刷新

以下是单击按钮后的jQuery：

$('#backToMain').on( "click", function() {
    $('#preTravelImages').addClass('finaff-form-help-hide');
    $('#postTravelImages').addClass('finaff-form-help-hide');
    $('#preTravel').removeClass('finaff-form-help-hide');
    $('#postTravel').removeClass('finaff-form-help-hide');
    $('#backToMain').addClass('finaff-form-help-hide');
});     

注：“preTravelImages”是一个包含多个图像的div；“postTravelImages”也是如此。“preTravel”和“postTravel”都只包含一个图像（单击preTravel图像使preTravelImages中的图像可见，同样地，单击postTravelImages使postTravelImages中的图像可见）

“隐藏”类是：

.finaff-form-help-hide {
    visibility: hidden;
    display: none;
}

以下是单击的按钮：

<button class="finaff-form-help-hide" id="backToMain" name="backToMain">Back to Form Help</button>

返回表单帮助

---

这些添加/删除类调用的顺序是否重要？或者我需要做什么？

添加一个返回false以防止默认链接操作：

$('#backToMain').on("click", function() {
    $('#preTravelImages').addClass('finaff-form-help-hide');
    $('#postTravelImages').addClass('finaff-form-help-hide');
    $('#preTravel').removeClass('finaff-form-help-hide');
    $('#postTravel').removeClass('finaff-form-help-hide');
    $('#backToMain').addClass('finaff-form-help-hide');
    return false;
});

---

单击链接通常会导致转到href=右侧？#backToMain是带有href的锚定标记吗？它是否可以像所有带有href的锚点默认做的那样？您可以使用

preventDefault（）

取消链接的默认操作。添加

e

参数：

$（'#backToMain'）。在（“单击”，函数（e）{

并在内部写入

e.preventDefault（）

。您是否在调试工具/控制台上看到任何网络流量？页面可能正在“闪烁”，但这并不意味着它正在“刷新”…您能确认吗？@KevinB单击可能（或可能不）在

href

…上完成，并且，该按钮是否在表单中？如果按钮没有类型，并且在类型提交的表单中没有其他按钮，它将充当提交按钮的角色，因此，基本上相同的场景（和类似的解决方案）完美；这就是所需的全部。我将尽快标记为回答（7分钟并倒计时…）