单击按钮时切换html登录/注册表单


toggle html login/register form when clicking button

我正在创建一个网站,如果用户没有帐户,则需要登录或注册。

到目前为止,我有以下登录页面的代码

<span href="#" class="button" id="toggle-login">Log in</span>
<div id="login">
  <h1>Log in</h1>
  <form>
    <input type="userID" placeholder="UserID" />
    <input type="password" placeholder="Password" />
    <input type="submit" value="Log in" />
  </form>
</div>

我有Javascript(下面),当点击顶部的登录按钮时,它应该隐藏登录表单然而,它似乎并没有隐藏登录表单。

$('#toggle-login').click(function(){
  $('#login').toggle();
});

我想知道是否有人能帮我切换隐藏和取消隐藏表单,是否有办法在一个页面上有两个表单,用户可以隐藏登录表单并显示注册表单,反之亦然

我的整个页面看起来是这样的:

    <!DOCTYPE html>
    <head>
        <title>Login Form</title> 
    </head>
    <body>
        <span href="#" class="btn btn-default" id="toggle-login">Log in</span>
        <div id="login">
            <h1>Log in</h1>
            <form>
                <input type="userID" placeholder="UserID" />
                <input type="password" placeholder="Password" />
                <input type="submit" value="Log in" />
            </form>
        </div>
        <script>
            $('#toggle-login').click(function(){
                $('#login').toggle();
            });
        </script> 
    </body>
</html>

感谢

如果你要使用jQuery库,你必须包含它。把它添加到你的头部分,你就可以了。

<script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<div id="toggle-login">
<form>
<!-- FORM ELEMTNS -->
<input typre="text">
</form>    
</div>
<input type="button" id="btn" value="toggle login" >

Jquery:

$("#btn").click(function(){
$("#toggle-login").toggle();
});

在head会话中还包括jquery库。

<script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.min.js"></script>