javascript - 当我重新加载页面时，在 url 中有#register，表单在#login 中是不可见的，表单是否正常工作？

Question

我在一个页面中定义了注册和登录表单，它通过 FadeInLeft 和 FadeInRight 工作，默认情况下它显示登录页面但是当我点击注册表单并尝试重新加载页面时，表单将不可见。

HTML

<div id="container_demo">
  <a class="hiddenanchor" id="tologin"></a>
  <a class="hiddenanchor" id="toregister"></a>
  <div id="wrapper">

    <div id="login" class="animate form">
      <h2>Sign In</h2>
      <form action="#" autocomplete="on" method="post">
        <label>Email</label>
        <input type="text" Name="Userame" required="">
        <label>Password</label>
        <input type="password" Name="Password" required="">
        <div class="send-button">
          <p><a href="account/reset.php" class="to_register">Forgot Password?</a>
          </p>
          <form>
            <input type="submit" value="SIGN IN">
          </form>
          <div class="clear"></div>
        </div>
        <p class="change_link">
          Don't have an account? <a id="signup" href="#toregister" class="to_register">Sign Up!</a>
        </p>
        <div class="clear"></div>
      </form>

      <div class="clear"></div>
    </div>

    <div id="register" class="animate form hide">
      <h2>Sign up</h2>
      <form action="#" autocomplete="on" method="post">
        <form action="#" method="post">
          <label>UserName</label>
          <input type="text" Name="Name" required="">
          <br>
          <label>Email</label>
          <input type="text" Name="Email" required="">
          <label>Password</label>
          <input type="password" Name="Password" required="">
          <div class="send-button">
            <form action="#" method="post">
              <input type="submit" value="SIGN UP">
            </form>
          </div>
        </form>
        <p class="change_link">
          Already a member? <a id="signin" href="#tologin" class="to_register">Sign In</a>
        </p>
        <div class="clear"></div>
      </form>
    </div>

  </div>
</div>

CSS

#toregister:target ~ #wrapper #register,
#tologin:target ~ #wrapper #login {
  -webkit-animation-name: fadeInLeft;
  -moz-animation-name: fadeInLeft;
  -ms-animation-name: fadeInLeft;
  -o-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
  -webkit-animation-delay: .1s;
  -moz-animation-delay: .1s;
  -o-animation-delay: .1s;
  -ms-animation-delay: .1s;
  animation-delay: .1s;
}
#toregister:target ~ #wrapper #login,
#tologin:target ~ #wrapper #register {
  -webkit-animation-name: fadeOutLeftBig;
  -moz-animation-name: fadeOutLeftBig;
  -ms-animation-name: fadeOutLeftBig;
  -o-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}
.animate {
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: both;
  -moz-animation-duration: 1s;
  -moz-animation-timing-function: ease;
  -moz-animation-fill-mode: both;
  -o-animation-duration: 1s;
  -o-animation-timing-function: ease;
  -o-animation-fill-mode: both;
  -ms-animation-duration: 1s;
  -ms-animation-timing-function: ease;
  -ms-animation-fill-mode: both;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-fill-mode: both;
}
.hide {
  display: none;
}

Answer 1

试试这个

/*-- add this javascript----*/
function signup(){
  document.getElementById('register').style.display = 'block';
  localStorage.setItem('showregister', 'true'); 
  document.getElementById('login').style.display = 'none';
  localStorage.setItem('showlogin', 'false'); 
}

function signin(){
  document.getElementById('register').style.display = 'none';
  localStorage.setItem('showregister', 'false'); 
  document.getElementById('login').style.display = 'block';
  localStorage.setItem('showlogin', 'true'); 
}

window.onload = function() {
    var showlogin = localStorage.getItem('showlogin');//alert();
    var showregister = localStorage.getItem('showregister');//alert();
    if(showlogin === 'true'){
         document.getElementById('login').style.display = "block";
        document.getElementById('register').style.display = "none";
    }
	if(showregister === 'true'){
         document.getElementById('register').style.display = "block";
        document.getElementById('login').style.display = "none";
    }
}

#toregister:target ~ #wrapper #register,
#tologin:target ~ #wrapper #login {
  -webkit-animation-name: fadeInLeft;
  -moz-animation-name: fadeInLeft;
  -ms-animation-name: fadeInLeft;
  -o-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
  -webkit-animation-delay: .1s;
  -moz-animation-delay: .1s;
  -o-animation-delay: .1s;
  -ms-animation-delay: .1s;
  animation-delay: .1s;
}
#toregister:target ~ #wrapper #login,
#tologin:target ~ #wrapper #register {
  -webkit-animation-name: fadeOutLeftBig;
  -moz-animation-name: fadeOutLeftBig;
  -ms-animation-name: fadeOutLeftBig;
  -o-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}
.animate {
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: both;
  -moz-animation-duration: 1s;
  -moz-animation-timing-function: ease;
  -moz-animation-fill-mode: both;
  -o-animation-duration: 1s;
  -o-animation-timing-function: ease;
  -o-animation-fill-mode: both;
  -ms-animation-duration: 1s;
  -ms-animation-timing-function: ease;
  -ms-animation-fill-mode: both;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-fill-mode: both;
}
.hide {
  display: none;
}

<div id="container_demo">
  <a class="hiddenanchor" id="tologin"></a>
  <a class="hiddenanchor" id="toregister"></a>
  <div id="wrapper">

    <div id="login" class="animate form">
      <h2>Sign In</h2>
      <form action="#" autocomplete="on" method="post">
        <label>Email</label>
        <input type="text" Name="Userame" required="">
        <label>Password</label>
        <input type="password" Name="Password" required="">
        <div class="send-button">
          <p><a href="account/reset.php" class="to_register">Forgot Password?</a>
          </p>
          <form>
            <input type="submit" value="SIGN IN">
          </form>
          <div class="clear"></div>
        </div>
        <p class="change_link">
          Don't have an account? <a id="signup" href="#toregister" class="to_register" onclick="signup()">Sign Up!</a>
<!--- call signup function onclick--->
        </p>
        <div class="clear"></div>
      </form>

      <div class="clear"></div>
    </div>

    <div id="register" class="animate form hide">
      <h2>Sign up</h2>
      <form action="#" autocomplete="on" method="post">
        <form action="#" method="post">
          <label>UserName</label>
          <input type="text" Name="Name" required="">
          <br>
          <label>Email</label>
          <input type="text" Name="Email" required="">
          <label>Password</label>
          <input type="password" Name="Password" required="">
          <div class="send-button">
            <form action="#" method="post">
              <input type="submit" value="SIGN UP">
            </form>
          </div>
        </form>
        <p class="change_link">
          Already a member? <a id="signin" href="#tologin" class="to_register" onclick="signin()">Sign In</a><!----- call signin function onclick----->
        </p>
        <div class="clear"></div>
      </form>
    </div>

  </div>
</div>