0

我目前在使用登录框时遇到了一些问题。我正在使用我自己的版本以及在线教程背后的逻辑。现在一切正常。当我单击我的登录按钮时，一个 JQuery 触发器会显示active分配给它的类的窗口。一旦出现登录框，用户可以点击登录框中的注册，注册窗口将变为活动状态。我知道我在这里可能有点难以理解，但问题应该相当容易。我想按下 LOGIN 旁边的一个新按钮，让用户直接进入 REGISTER。为此，我需要设置active根据我按下的按钮，状态为不同的形式。我正在尝试制作一个 js 脚本来感知哪个链接已被单击，然后将活动状态设置为该表单。所以第一个代码是链接，现在他们都在登录阶段打开了登录框。但我的目标是让第二个打开注册阶段。这可能吗？如何通过单击将活动状态设置为正确的形式？

这是一个 jsFiddle

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

2 回答 2

1

我重新阅读了您的问题，我想我听到了您遇到问题的地方：

// NOTE: add id="signinForm" and id="registerForm" to your forms, I suggest this over class="signin" and class="register" as you'll only have one signin/register form throughout your app.
// rename rel="register" to id="register", why are you using rel? http://www.w3schools.com/TAGS/att_a_rel.asp
$("#signin").click(function() {
    $("#registerForm").removeClass("active");
    $("#signinForm").addClass("active");
});
$("#register").click(function() {
    $("#signinForm").removeClass("active");
    $("#registerForm").addClass("active");
});

要访问并提交您的表单，请为您的提交按钮创建另一个点击事件：

 $("input[type=submit]").click(function() {
    var form = $("form.active")[0];
    form.submit();
 });
于 2013-05-21T13:06:58.077 回答
-2

你为什么不使用标签？

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Login</a></li>
    <li><a href="#tabs-2">Register</a></li>
  </ul>
  <div id="tabs-1">
    <form class="login" >  
        <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>
  </div>
  <div id="tabs-2">
    <form class="register">  
        <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>
  </div>
</div>

JS：

$(function() {
    $( "#tabs" ).tabs();
});

它应该会容易得多，并且您会获得所需的行为。

问候，

于 2013-05-21T13:06:11.797 回答