隱藏某些元素後，爲什麼我的頁面會刷新？

我有一個頁面，通過有條件地顯示/隱藏某些元素來「僞造」到另一個頁面。當默認顯示的兩個圖像中的任何一個被點擊時，它們都被隱藏，並且基於哪一個被點擊，顯示其他元素。隱藏某些元素後，爲什麼我的頁面會刷新？

其中顯示的元素是「返回」按鈕。點擊該按鈕時，它隱藏當前顯示的內容（包括其本身），並顯示原始的兩個圖像。

它工作，除了頁面，短暫的延遲後，「閃爍」（刷新）。爲什麼，以及如何避免這種刷新？

這裏是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分鐘，倒計時...） –

隱藏某些元素後，爲什麼我的頁面會刷新？

回答

相關問題