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

我有一个页面，通过有条件地显示/隐藏某些元素来“伪造”到另一个页面。当默认显示的两个图像中的任何一个被点击时，它们都被隐藏，并且基于哪一个被点击，显示其他元素。隐藏某些元素后，为什么我的页面会刷新？

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

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

这里是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>

难道这些顺序添加/删除类物质要求？或者我需要做什么？

来源

2015-10-05 B. Clay Shannon

点击通常会导致要在href = 吧？是#backToMain锚定标记与HREF？它可以做什么所有的锚定与href默认做？ –

您可以使用'preventDefault（）'取消链接的默认操作。添加'e'参数：$（'＃backToMain'）。on（“click”，function（e）{'and write'e.preventDefault（）' –

你看到调试工具/控制台？页面可能会'闪烁'，但这并不意味着它正在'刷新'...你能证实这一点吗？ – ochi

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

来源

2015-10-05 18:20:27

完美;也是这样ķ。我会尽快回复（7分钟，倒计时...） –

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

回答

相关问题