Javascript “出现登录窗体”“消失登录”按钮，反之亦然

我想知道是否有一种简单的方法（例如使用javascript）来实现这个想法。我有以下代码（一个简单的代码片段示例）：

登录。
登录表单
登录

那么，当我点击“登录按钮”时，就会出现“登录表单”。到目前为止还不错

但是现在，如果可能的话，我想使用id number（即登录按钮使用id=“01”，登录表单使用id=“02”）获得这些功能：

当我点击“登录按钮”（id=“01”）时，会出现“登录表单”（id=“02”），但我希望“登录按钮”（id=“01”）同时消失

…反之，当我关闭“登录表单”（id=“02”）时，必须再次出现“登录按钮”（id=“01”）

---

有什么想法吗？

这里有一个更清晰的方法来满足您的需求。您可以根据div的属性切换该div并提交表单

函数toggleLoginForm（）{
if（document.getElementById（'id02'）.style.display！='block'）document.getElementById（'id02'）.style.display='block'；
else document.getElementById（'id02'）.style.display='none'；
}
函数formSubmitFunction（）{
document.getElementById（'id01'）.style.display='none'；
document.getElementById（'id02'）.style.display='none'；
返回false；
}

。我的表单{
显示：无；
}

登录。
登录表单
登录

这里有一个更简洁的方法来满足您的需求。您可以根据div的属性切换该div并提交表单

函数toggleLoginForm（）{
if（document.getElementById（'id02'）.style.display！='block'）document.getElementById（'id02'）.style.display='block'；
else document.getElementById（'id02'）.style.display='none'；
}
函数formSubmitFunction（）{
document.getElementById（'id01'）.style.display='none'；
document.getElementById（'id02'）.style.display='none'；
返回false；
}

。我的表单{
显示：无；
}

登录。
登录表单
登录

谢谢，我会试试。不会，因为登录表单出现时，“登录表单”按钮（和文本）不会消失。：-）您应该运行代码段并检查它，它在那里工作。谢谢，我会尝试它。不，因为“登录表单”按钮（和文本）不会在登录表单出现时消失。：-）您应该运行代码段并检查它，它正在那里工作。

<!-- LOGIN BUTTON -->
<div id="id01" class="text-login_button">
    <h1>Login.</h1>         
    <button onclick="document.getElementById('id02').style.display='block'" class="btn btn-login">Login Form</button>   
</div>

<!-- LOGIN FORM -->
<div id="id02" class="my-form">
    <form class="blablabla" action="" method="post">
        <div class="container">
            <input type="text" placeholder="Enter Username" name="uname" required>              
            <input type="password" placeholder="Enter Password" name="psw" required>                
            <button type="submit">Login</button>
        </div>
    </form>
</div>