我正在创建一个网站,如果用户没有帐户,则需要登录或注册。
到目前为止,我有以下登录页面的代码
<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>