如何在不刷新页面的情况下更改javascript的url

时间:2020-08-19 20:14:16

标签: javascript html

我有两个按钮登录和注册。单击后,登录按钮显示登录表单,注册按钮显示注册表单。我想要的是在不刷新页面的情况下更改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>

1 个答案:

答案 0 :(得分:1)

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

这总是将url推送到历史记录。如果用户已经在注册页面上,则需要更改代码以按url1(登录)。

我建议通过分离两个不同的点击处理程序来做到这一点 将类“ login-btn”添加到您的登录按钮并使用 $(".login-btn").click(function() {来解决这个问题,并且您的注册按钮使用相同的方法