我的目標是在單擊“保存”按鈕時顯示帶有成功訊息的 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 沒有顯示。
謝謝你的幫助
uj5u.com熱心網友回復：
此解決方案在開始時隱藏了按鈕。
$("#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>uj5u.com熱心網友回復：
請參考以下鏈接并嘗試自己的。
點擊這里
如果您需要任何幫助，請告訴我。
uj5u.com熱心網友回復：
為了重新創建您想做的事情，我創建了一個帶有隱藏 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>我希望這就是你想要達到的目標。
干杯!
uj5u.com熱心網友回復：
感謝大家的快速答復！我設法做到了！
所以我把我的按鈕放在一個 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);
}
uj5u.com熱心網友回復：
您的問題有解決方案 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。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/325423.html
標籤：javascript html 查询 asp.net
上一篇：最優化方法小結
下一篇：2021年華為杯數模賽D題總結