尝试使用 querySelector 切换表单，但它没有任何变化

Question

我试图在我正在使用的网站上为我的注册和登录选项卡切换模式，但最后一部分将它从隐藏变为可见在我使用了一点的网站上 javascript在表单中添加一个“活动”class，这样它们就会出现等等……帮助:)

代码：

CSS:

.login-form{
color: white;
text-align: center;
position: absolute;
top: 20%;
left: 37.5%;
transform: transform(-50%,-50%);
background: black;
border-radius: 15px;
box-shadow: 3px 3px 10px 1px rgba(0, 0, 0, 2);
visibility: hidden;
transform: .2s;

}

.login-form.active{
top: 50%;
transition: .2s;
visibility: visible;

}

.container-fluid.active{
filter: blur(20px);
transition: .2s;
pointer-events: none;

}

HTML: 表格-

<div class="login-form">
    <div class="form">
        <div class="closeBTN" onclick="loginToggle()">&times;</div>
        <div class="title">
            <h1>Login</h1>
        </div>
        <form action="loginConfig.php">
            <input type="email" placeholder="Email" required>
            <input type="password" placeholder="Password" required>
            <input type="submit" value="Login">
        </form>
    </div>
</div>

导航栏部分：

<div class="login">
                <ul>
                    <li onclick="registerToggle()">Registar-se</li>
                    <li onclick="loginToggle()">Login</li>
                </ul>
            </div>

JS:

  function loginToggle() {
        var container = document.querySelector('.container-fluid');
        container.classlist.add('active');
        var popup = document.querySelector('.login-form');
        popup.classlist.add('active');
    }

Answer 1

您的问题之一是您不尊重 Java 脚本的驼峰式大小写。您必须将其用作“classList”而不是“classlist”。

此外，您的代码中没有任何包含“.container-fluid”的元素，因此也会触发错误。考虑删除该行并将 classlist 更改为 classList 并尝试一下：

  function loginToggle() {
        //var container = document.querySelector('.container-fluid');
        //container.classList.add('active');
        var popup = document.querySelector('.login-form');
        popup.classList.add('active');
    }

.login-form{
color: white;
text-align: center;
position: absolute;
top: 20%;
left: 37.5%;
transform: transform(-50%,-50%);
background: black;
border-radius: 15px;
box-shadow: 3px 3px 10px 1px rgba(0, 0, 0, 2);
display:none;
transform: .2s;
}

.login-form.active{
top: 50%;
transition: .2s;
visibility: visible;
}

.container-fluid.active{
filter: blur(20px);
transition: .2s;
pointer-events: none;
}
.active{
  display:block;
}

<div class="login-form">
    <div class="form">
        <div class="closeBTN" onclick="loginToggle()">&times;</div>
        <div class="title">
            <h1>Login</h1>
        </div>
        <form action="loginConfig.php">
            <input type="email" placeholder="Email" required>
            <input type="password" placeholder="Password" required>
            <input type="submit" value="Login">
        </form>
    </div>
</div>

<div class="login">
                <ul>
                    <li onclick="registerToggle()">Registar-se</li>
                    <li onclick="loginToggle()">Login</li>
                </ul>
</div>

尝试使用 querySelector 切换表单，但它没有任何变化

Trying to toggle a form using querySelector and it just isn't budging

html

javascript

css

queryselector