用jQuery在網址中用哈希顯示網頁的一部分

Question

好吧，這個項目出現在我腦海的原因是這個問題：
當我點擊註冊按鈕時，PHP腳本就會處理它，它顯示錯誤但該頁面將在登錄表單中。

接口：

的想法現在：
如果URL中有一些參數，加工成的jQuery的，並從URL顯示請求的頁面。

實施例：someurl.com/#login - 然後顯示登錄頁面
someurl.com/#register - 然後顯示寄存器頁

試過溶液（jQuery的）：

$(function() { 
// get the `hash` from the url 
var url = window.location.hash; 
// display the page 
$(url).show(); 
} 

---

我現在代碼：

的腳本：

種

$(function() { 
    var url = window.location.hash; 
    $(url).show(); 

    $('#login-form-link').click(function(e) { 
     $("#login-form").delay(100).fadeIn(100); 
     $("#register-form").fadeOut(100); 
     $('#register-form-link').removeClass('active'); 
     $(this).addClass('active'); 
     e.preventDefault(); 
     $(document).prop('title', 'Login | Prospekt'); 
    }); 
    $('#register-form-link').click(function(e) { 
     $("#register-form").delay(100).fadeIn(100); 
     $("#login-form").fadeOut(100); 
     $('#login-form-link').removeClass('active'); 
     $(this).addClass('active'); 
     e.preventDefault(); 
     $(document).prop('title', 'Register | Prospekt'); 
    }); 

}); 

的形式：

<div class="container"> 
     <div class="row"> 
      <div class="col-md-6 col-md-offset-3"> 
       <div class="panel panel-login"> 
        <div class="panel-heading"> 
         <div class="row"> 
          <div class="col-xs-6"> 
           <a href="#" class="active" id="login-form-link">Login</a> 
          </div> 
          <div class="col-xs-6"> 
           <a href="#" id="register-form-link">Register</a> 
          </div> 
         </div> 
         <hr> 
        </div> 
        <div class="panel-body"> 
         <div class="row"> 
          <div class="col-lg-12"> 
           <form id="login-form" action="http://phpoll.com/login/process" method="post" role="form" style="display: block;"> 
            <div class="form-group"> 
             <input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Username" value=""> 
            </div> 
            <div class="form-group"> 
             <input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Password"> 
            </div> 
            <div class="form-group text-center"> 
             <input type="checkbox" tabindex="3" class="" name="remember" id="remember"> 
             <label for="remember"> Remember Me</label> 
            </div> 
            <div class="form-group"> 
             <div class="row"> 
              <div class="col-sm-6 col-sm-offset-3"> 
               <input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-login" value="Log In"> 
              </div> 
             </div> 
            </div> 
            <div class="form-group"> 
             <div class="row"> 
              <div class="col-lg-12"> 
               <div class="text-center"> 
                <a href="http://phpoll.com/recover" tabindex="5" class="forgot-password">Forgot Password?</a> 
               </div> 
              </div> 
             </div> 
            </div> 
           </form> 
           <form id="register-form" action="http://phpoll.com/register/process" method="post" role="form" style="display: none;"> 
            <div class="form-group"> 
             <input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Username" value=""> 
            </div> 
            <div class="form-group"> 
             <input type="email" name="email" id="email" tabindex="1" class="form-control" placeholder="Email Address" value=""> 
            </div> 
            <div class="form-group"> 
             <input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Password"> 
            </div> 
            <div class="form-group"> 
             <input type="password" name="confirm-password" id="confirm-password" tabindex="2" class="form-control" placeholder="Confirm Password"> 
            </div> 
            <div class="form-group"> 
             <div class="row"> 
              <div class="col-sm-6 col-sm-offset-3"> 
               <input type="submit" name="register-submit" id="register-submit" tabindex="4" class="form-control btn btn-register" value="Register Now"> 
              </div> 
             </div> 
            </div> 
           </form> 
          </div> 
         </div> 
        <!-- 
        <hr> 
         <div class="alert alert-warning alert-dismissible"> 
          <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a> 
          Username is required! <br> 
          Password is required! 
         </div> 
        --> 
        </div> 
       </div> 
      </div> 
     </div> 
</div> 

Answer 1

在您從網址讓你的哈希值，調用對應於散列點擊（）事件聲明點擊處理程序後。

$(function() { 

    $('#login-form-link').click(function(e) { 
     $("#login-form").delay(100).fadeIn(100); 
     $("#register-form").fadeOut(100); 
     $('#register-form-link').removeClass('active'); 
     $(this).addClass('active'); 
     e.preventDefault(); 
     $(document).prop('title', 'Login | Prospekt'); 
    }); 
    $('#register-form-link').click(function(e) { 
     $("#register-form").delay(100).fadeIn(100); 
     $("#login-form").fadeOut(100); 
     $('#login-form-link').removeClass('active'); 
     $(this).addClass('active'); 
     e.preventDefault(); 
     $(document).prop('title', 'Register | Prospekt'); 
    }); 

    var url = window.location.hash; 
    $(url + '-form-link').click(); 
});