我目前在使用登录框时遇到了一些问题。我正在使用我自己的版本以及在线教程背后的逻辑。现在一切正常。当我单击我的登录按钮时,一个 JQuery 触发器会显示active
分配给它的类的窗口。一旦出现登录框,用户可以点击登录框中的注册,注册窗口将变为活动状态。我知道我在这里可能有点难以理解,但问题应该相当容易。我想按下 LOGIN 旁边的一个新按钮,让用户直接进入 REGISTER。为此,我需要设置active
根据我按下的按钮,状态为不同的形式。我正在尝试制作一个 js 脚本来感知哪个链接已被单击,然后将活动状态设置为该表单。所以第一个代码是链接,现在他们都在登录阶段打开了登录框。但我的目标是让第二个打开注册阶段。这可能吗?如何通过单击将活动状态设置为正确的形式?
HTML
<li><a href="#login-box" id="signin" class="linkform login-window">Login</a></li>
<li><a href="#login-box" rel="register" class="linkform login-window">Register</a></li>
<div id="login-box" class="login-popup"></div>
<form class="register" >
<input type="text" name="login" placeholder="email">
<input type="password" name='password' placeholder="pass" required>
<input type="submit" name="submit" value="Reg">
<a href="index.html" rel="signin" class="linkform forgot right">login</a>
</form>
<form class="signin active">
<input type="text" name="login" placeholder="email">
<input type="password" name='password' placeholder="pass" required>
<input type="submit" name="submit" value="Login">
<a href="register.html" rel="register" class="linkform forgot right">Reg</a>
</form>
Javascript
$(function() {
//the form wrapper (includes all forms)
var $form_wrapper = $('#login-box'),
//the current form is the one with class active
$currentForm = $form_wrapper.children('form.active'),
//the change form links
$linkform = $form_wrapper.find('.linkform');
$linkform.bind('click', function(e) {
var $link = $(this);
var target = $link.attr('rel');
$currentForm.fadeOut(400, function() {
//remove class active from current form
$currentForm.removeClass('active');
//new current form
$currentForm = $form_wrapper.children('form.' + target);
//animate the wrapper
$form_wrapper.stop()
.animate({
height: $currentForm.data('height') + 'px'
}, 500, function() {
//new form gets class active
$currentForm.addClass('active');
//show the new form
$currentForm.fadeIn(400);
});
});
e.preventDefault();
});
});