Javascript顯示元素，在頁面加載時隱藏元素。但它恢復了

-1

頁面加載時我想隱藏元素#buttonSaveArea，顯示元素#buttonSaveShower。一旦點擊#buttonSaveShower，它應該隱藏，並且應該出現#buttonSaveArea。Javascript顯示元素，在頁面加載時隱藏元素。但它恢復了

問題是，$(document).ready被反覆調用。如何解決它？另外，當JavaScript被禁用時，我想只需從一開始就可以看到#buttonSaveArea。

$(document).ready(function(){ 
    $("#buttonSaveArea").hide(); 

    $("#buttonSaveShower").click(function(){ 
    $("#buttonSaveArea").fadeIn(); 
    $("#buttonSaveShower").hide(); 
    }); 
}); 


<!------ The element that should show the button below ----------------> 
<div class="button" id="buttonSaveShower" style="clear:both; margin-top:15px;"> 
    <a href="" style="width:50px !important;"> edytuj </a> 
</div> 

<!------ Button: save ----------------> 
<div class="fbCenter" id="buttonSaveArea"> 
    <input type="submit" value="Zapisz" class="formButton" 
     onmouseover="this.className+=' pressed'" 
     onmouseout="this.className=this.className.replace(' pressed', '')" 
    /> 
</div>

來源

2013-04-28 Yar

您是否點擊了鏈接或提交表單？聽起來你只是刷新頁面。 – 2013-04-28 06:12:35

#buttonSaveArea是一個包含提交按鈕的div，該提交按鈕尚未按下。 #buttonSaveShower是一個帶有空鏈接的div（只是爲了顯示爲鏈接）。你做了 – Yar 2013-04-28 06:14:54

？或者它正在重新加載您所在的頁面？ – dave 2013-04-28 06:21:40

更換<a href="">與<a href="#">幫助將其隱藏。謝謝大家的建議。

來源

2013-04-28 06:40:14 Yar

你應該使用event.preventDefault()

$(document).ready(function(){ 
    $("#buttonSaveArea").hide(); 

    $("#buttonSaveShower").click(function(event){ 
    event.preventDefault(); 
    $("#buttonSaveArea").fadeIn(); 
    $("#buttonSaveShower").hide(); 
    }); 
});

另外，如果你想與#buttonSaveArea爲隱藏加載頁面從重新加載頁面停止錨標記。您應該使用CSS默認

#buttonSaveArea{ 
    display: none; 
}

來源

2013-04-28 06:28:38

謝謝。 'event.preventDefault（）;'確實很有趣。在Chrome中，它運行良好。但是，在Firefox中，它阻止了整個事情的工作（出現/消失的東西）。「另外，當JavaScript被禁用時，我想''buttonSaveArea'從一開始就是可見的。」 – Yar 2013-04-28 06:52:59

@Yar確保在您的單擊事件處理程序中有一個名爲event的參數。另外，如果你不想迎合禁用javaScript的狀態，你應該使用'$（「＃buttonSaveArea」）。hide（）;'在你的文檔就緒功能，忘記我發佈的CSS。 – 2013-04-28 08:23:53

Javascript顯示元素，在頁面加載時隱藏元素。但它恢復了

回答

相關問題