我是初学者，我正在处理一个网页。我对网页的想法是，如果我点击登录按钮，#login-box将消失，另一个 ( .dashboard) 将出现。我已经加入display: none到了.dashboard类，成为隐藏在第一。然后我做了一些 JavaScript 代码来隐藏#login-box和添加display: block到.dashboard类，如果我点击登录按钮。
我的代码：
const loginBoxEl = document.getElementById("login-box");
const loginBtnEl = document.getElementById("login-btn");
const dashboardEl = document.getElementById("dashboard");
loginBtnEl.addEventListener("click", function() {
loginBoxEl.style.display = "none";
dashboardEl.style.display = "block";
});#login-box {
height: 100vh;
}
#login-area {
border-radius: 8px;
box-shadow: 5px 5px 10px lightgray;
}
#dashboard {
display: none;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Payoneer Bank Account | Dabananda Mitra</title>
<!-- Bootstrap CSS CDN -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<!-- Login Box -->
<div class="d-flex justify-content-center align-items-center" id="login-box">
<div class="p-5" id="login-area">
<h1 class="bank-title">Welcome to Payoneer</h1>
<input class="form-control my-3" type="email" placeholder="E-mail" required>
<input class="form-control my-3" type="password" placeholder="Password" required>
<button class="btn btn-success" type="submit" id="login-btn">Log in</button>
</div>
</div>
<!-- Dashboard -->
<div id="dashboard">
<h1>Dashboard</h1>
</div>
<!-- Bootstrap JavaScript CDN -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<!-- Custom JavaScript -->
<script src="./main.js"></script>
</body>
</html>当我单击登录按钮时，.dashboard该类正在变为display: block但#login-box并没有通过display: none添加为内联 CSS消失。
我该如何解决问题？
const loginBoxEl = document.getElementById("login-box");
const loginBtnEl = document.getElementById("login-btn");
const dashboardEl = document.getElementById("dashboard");
loginBtnEl.addEventListener("click", function() {
loginBoxEl.classList.add("hide_login");;
dashboardEl.style.display = "block";
});#login-box {
height: 100vh;
}
#login-area {
border-radius: 8px;
box-shadow: 5px 5px 10px lightgray;
}
#dashboard {
display: none;
}
.hide_login{
display: none!important;
}<div class="d-flex justify-content-center align-items-center" id="login-box">
<div class="p-5" id="login-area">
<h1 class="bank-title">Welcome to Payoneer</h1>
<input class="form-control my-3" type="email" placeholder="E-mail" required>
<input class="form-control my-3" type="password" placeholder="Password" required>
<button class="btn btn-success" type="submit" id="login-btn">Log in</button>
</div>
</div>
<!-- Dashboard -->
<div id="dashboard">
<h1>Dashboard</h1>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句