как изменить URL при переключении javascript без обновления страницы

#javascript #html

#javascript #HTML

Вопрос:

У меня есть две кнопки входа и регистрации. Кнопка входа показывает форму входа, а кнопка регистрации показывает форму регистрации при нажатии. Я хочу изменить URL без обновления страницы, поэтому, если я нажму register, он должен изменить URL на register тот же, что и для входа в систему. Пока что, когда я нажимаю кнопку register, она изменяет URL, но когда я нажимаю login, она не меняется на 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>
  

Ответ №1:

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

Это всегда отправляет URL в историю. Вам нужно изменить свой код на push url1 (логин), если пользователь уже находится на странице регистрации.

Я бы рекомендовал сделать это, разделив два разных обработчика кликов, Добавить класс «login-btn» к вашей кнопке входа и использовать $(".login-btn").click(function() { для обработки этого, и тот же подход для вашей кнопки регистрации