使按钮不刷新Aspx页面

Make the Button do not refresh the Aspx Page

本文关键字：Aspx 页面 刷新 按钮      更新时间：2023-09-26

我正试图在我的网站上做一个JavaScript，当我点击一个按钮时，会出现一个弹出窗口，但Aspx每次点击按钮都会重新加载网页，刷新前的JavaScript会起作用，但页面会重新加载，页面会恢复到没有弹出窗口的状态。有没有什么方法可以在不影响aspx按钮功能的情况下，使页面在按下HTML按钮时不刷新？

这是HTML/ASPX:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <link rel="stylesheet" type="text/css" href="../css/main.css" />
    <script type="text/javascript" src="../Scripts/jquery.js"></script>
    <script type="text/javascript" src="../Scripts/jqueryui.js"></script>
    <script type="text/javascript" src="../Scripts/myjqTest.js"></script>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
<form runat="server">
    <div id="header">
    <li><asp:LinkButton ID="loginoptionsButton" CssClass="loginoptionsButton"
    runat="server" CausesValidation="False" ClientIDMode="Static"
    OnClick="loginoptionsButton_Click">LOGIN</asp:LinkButton></li>
    <li><asp:LinkButton ID="signuplogoutButton" CssClass="signuplogoutButton"
    runat="server" CausesValidation="False" ClientIDMode="Static"
    OnClick="signuplogoutButton_Click">CADASTRAR-SE</asp:LinkButton></li>
    </div>
    <div id="content">
        <button id="TestJS" class="">Test</button>
        <div id="Popup" class=""></div>
    </div>
</form>
</body>
</html>

这是JS:

var test = document.getElementById("Popup");
test.addEventListener("click", function () {
    if (test.className === "Hide") {
        test.className = "";
    } else {
        test.className = "Hide";
    }
});

试试这个：

test.addEventListener("click", function (event) {
    if (test.className === "Hide") {
        test.className = "";
    } else {
        test.className = "Hide";
    }
    event.preventDefault();
});
相关文章：