單擊按鈕時顯示 div Javascript

Question

我的目標是在單擊“保存”按鈕時顯示帶有成功消息的 div。 不幸的是，我設法做的就是在每次加載頁面時顯示此消息。

這是我的代碼：

<div id="fadeDiv">
    <p>Content saved !</p>
</div>

$(document).ready(function () {
    $('#fadeDiv').fadeIn(1000);
    setTimeout(function () { $('#fadeDiv').fadeOut(1000); }, 1000);
});

我試着做

$('#saveBtn").click(...);

但是當我點擊按鈕時，即使我沒有 Response.Redirect() 頁面也會重新加載，所以我的 div 沒有顯示。

謝謝你的幫助

Answer 1

此解決方案在開始時隱藏了按鈕。

 $("#saveBtn").click(function () { $('#fadeDiv').fadeIn(1000); setTimeout(function () { $('#fadeDiv').fadeOut(1000); }, 1000); });

 <div id="fadeDiv" style="display:none"> <p>Content saved !</p> </div> <button id="saveBtn"> Save! </button>

Answer 2

請參考以下鏈接並嘗試自己的。

點擊這里

如果您需要任何幫助，請告訴我。

Answer 3

您的問題有解決方案1.這是我們的 html

    <div id="fadeDiv">
      <p>Content saved !</p>
    </div>
   <button id="saveBtn">Show</button>

2.Jquery代碼

$(document).ready(function(){
     $("#fadeDiv").hide();
      $("#saveBtn").click(function(){
        $("#fadeDiv").show();
      });
    });

問題解決方案的說明。 1.html 結構與你的相同，解決方案在 jquery 代碼中。

A. 這一行 $("#fadeDiv").hide(); 當我們第一次到達我們的頁面時隱藏 div。

B. 當我們點擊保存按鈕時，這段代碼就會運行
$("#saveBtn").click(function(){

});。

C.最后一件事，這一行 $("#fadeDiv").show(); 將顯示隱藏的 div。

Answer 4

為了重新創建您想要執行的操作，我創建了一個帶有隱藏 div 的 HTML，該 div 在成功保存時將顯示在紅色邊框 div 中。 請注意，按鈕位於 div 之外。

其次，我創建了一個簡單的 JavaScript 函數來觸發 div 的顯示並隱藏保存按鈕。

 function ShowHideDiv() { //show div when button is clicked document.getElementById("myDiv").style.display = "block"; //hide save button after click document.getElementById("saveButton").style.display = "none"; }

 <div id="myDiv" style="display: none; border-style: solid; border-width:thick; border-color:red;"> <p> Hey..!! <br><br>Your Content saved!! :)</p> </div> <button onclick="ShowHideDiv()" id = "saveButton">Save Button</button>

我希望這就是你想要達到的目標。

干杯!

Answer 5

感謝大家的快速答復！ 我設法做到了！

所以我把我的按鈕放在一個 asp UpdatePanel 中，以避免當它被點擊時，頁面被重新加載。 之后，我在單擊按鈕時調用的 C# 函數中添加了一個 RegisterStartupScript。 最后，RegisterStartupScript 只是調用管理消息顯示的 Javascript 函數。

這是代碼：

HTML

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:Button ID="saveBtn" runat="server" Text="Save" OnClick="saveBtn_Click"/>
    </ContentTemplate>
</asp:UpdatePanel>
<div id="fadeDiv" style="display: none">
    <p id="saveMsg">Content saved</p>
</div>

C＃

protected void saveBtn_Click(object sender, EventArgs e)
{
    // ...
    ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "call", "displaySaveMsg();", true);
}

Javascript

function displaySaveMsg() {
    $('#fadeDiv').fadeIn(1000);
    setTimeout(function () { $('#fadeDiv').fadeOut(1000); }, 1000);
}