如何在不刷新頁面的情況下更改url on toggle javascript

Question

我有兩個按鈕登錄和注冊。 單擊登錄按鈕顯示登錄表單，注冊按鈕顯示注冊表單。 我想要的是在不刷新頁面的情況下更改 url 所以如果我單擊注冊它應該更改 url 以register相同的登錄名。 到目前為止，當我單擊注冊按鈕時，它會更改 url，但是當我單擊登錄時，它不會更改為login url ，它一直顯示寄存器 url 我該如何解決這個問題？

Html

   <li class="signin-active"><a class="btn">Log in</a></li>
   <li class="signup-inactive"><a class="btn">Sign up </a></li>


    <div ng-app ng-init="checked = false">

     <form class="form-signin" action="" method="post" name="form">
      <label for="username">Username</label>
      <input class="form-styling" type="text" name="username" placeholder=""/>
      <label for="password">Password</label>
      <input class="form-styling" type="text" name="password" placeholder=""/>
      <input type="checkbox" id="checkbox"/>
      <label for="checkbox" ><span class="ui"></span>Remember me</label>
      <div class="btn-animate">
        <a class="btn-signin">Sign in</a>
      </div>
    </form>

          
         <form class="form-signup" action="" method="post" name="form">
           <label for="fullname">Full name</label>
           <input class="form-styling" type="text" name="fullname" placeholder=""/>
           <label for="email">Email</label>
           <input class="form-styling" type="text" name="email" placeholder=""/>
           <label for="password">Password</label>
           <input class="form-styling" type="text" name="password" placeholder=""/>
           <label for="confirmpassword">Confirm password</label>
           <input class="form-styling" type="text" name="confirmpassword" placeholder=""/>
           <a ng-click="checked = !checked" class="btn-signup">Sign Up</a>
         </form>
   </div>

Javascript

  <script>
  $(function() {
    var url = '{{ route('register') }}';
    var url1 = '{{ route('login') }}';

    $(".btn").click(function() {
    $(".form-signin").toggleClass("form-signin-left");
    $(".form-signup").toggleClass("form-signup-left");
    $(".signup-inactive").toggleClass("signup-active");
    $(".signin-active").toggleClass("signin-inactive");
        window.history.pushState('null', 'null', url);
    });
});
</script>

Answer 1

window.history.pushState('null', 'null', url);

這總是將 url 推向歷史。 如果用戶已經在注冊頁面上，您需要更改代碼以推送url1 （登錄）。

我建議通過分離兩個不同的點擊處理程序來執行此操作將 class“login-btn”添加到您的登錄按鈕並使用$(".login-btn").click(function() {來處理它，以及相同的方法你的注冊按鈕