Question

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

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

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

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

它应该更容易，你会得到理想的行为。

问候，

通过单击链接更改div的活动状态

2 个答案: