Question

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

然后显示的元素是“返回”按钮。单击该按钮时，它会隐藏当前显示的内容（包括其自身），并显示原始的两个图像。

除了页面之外，它在短暂延迟后“闪烁”（刷新）。为什么，以及如何避免这种刷新？

这是按钮点击后面的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中的图像可见，同样单击postTravelImage会使postTravelImages中的图像可见）。

“隐藏”类是：

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

这是点击的按钮：

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

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

Answer 1

添加返回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;
});

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

1 个答案: