changer l'état actif sur div en cliquant sur un lien

Question

J'ai actuellement quelques problèmes avec une boîte de connexion. J'utilise ma propre version avec la logique derrière un tutorial online. Tout fonctionne bien maintenant. Lorsque je clique sur mon bouton de connexion, un déclencheur JQuery affiche la fenêtre associée à la classe active. Et une fois la boîte de connexion apparue, l'utilisateur peut cliquer sur enregistrer dans la boîte de connexion et une fenêtre de registre devient active. Je sais que je pourrais être un peu difficile à suivre ici, mais la question devrait être assez facile. Je veux appuyer sur un nouveau bouton à côté de LOGIN, qui amène l'utilisateur directement à REGISTER. Pour cela, je devrais définir l'état active sous différentes formes en fonction du bouton sur lequel j'appuie. J'essaie de créer un script js qui détecte quel lien a été cliqué puis définit l'état actif sur ce formulaire. Donc, le premier code est les liens, en ce moment tous les deux ouvrent la boîte de connexion à l'étape de connexion. Mais mon objectif est d'obtenir le deuxième pour ouvrir la phase de registre. Est-ce possible? Comment puis-je définir l'état actif sur le bon formulaire en un clic?

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

Je Relisez votre question, je pense que je l'entends où vous rencontrez des problèmes:

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

Pour accéder et soumettre votre formulaire, créez un autre événement click à vos boutons submit:

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

Answer 2

pourquoi ne pas utiliser les onglets?

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

il devrait être assez beaucoup plus facile et vous obtenez le comportement souhaité.

Salutations,