通過單擊鏈接更改div的活動狀態

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

要訪問並提交表單，創建另一個click事件到您的提交按鈕：

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

它應該是相當容易得多，你會得到期望的行爲。

問候，