当我重新加载页面时，在URL中使用#Register，#login中的表单是不可见的，表单正常工作

Question

i在一个页面中定义了寄存器和登录表单，它正在通过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>