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

Question

I'm currently having some issues with a Login-box. I'm using my own version with the logic behind a tutorial online . It all works fine right now. When I click my Login button, a JQuery trigger displays the window which has the class active assigned to it. And once the login box has appears, the user could click on register in the login box and a register window becomes active. I know i could be a bit hard to follow here but the question should be fairly easy. I want to press a new button next to LOGIN, that takes the user directly to REGISTER. For that I would need to set the active state to different forms depending on which button I press. I'm trying to make a js script that senses which link has been click and then sets the active state to that form. So the first Code is the links, right now both of them open the login box at the signin stage. But my goal is to get the second one to open the register stage. Is this possible? How can I set the active state to the right form in a click ?

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

I re-read your question, I think I hear where you are having problems:

// 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");
});

To access and submit your form, create another click event to your submit buttons:

 $("input[type=submit]").click(function() {
    var form = $("form.active")[0];
    form.submit();
 });

Answer 2

why don't you use tabs?

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

it should be pretty much easier and you get the desired behaviour.

Greetings,