Question

我正在建立一个网站，要求他们登录或注册，如果他们没有帐户。

到目前为止，我有以下代码用于登录页面

<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>

由于

Answer 1

如果要使用它，必须包含jQuery库。将此添加到您的头部，你应该没事。

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

Answer 2

<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();
});

还包括头部会话中的jquery库。

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

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

2 个答案: