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

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

HTML

   
 
 
Sign In
 
 Email  Password  
 
Forgot Password? 
    
 
 
 Don't have an account? Sign Up! 
 
  
 
 
 
Sign up
 
  UserName  
 Email  Password  
    
  
 Already a member? Sign In 
 
  
 
  

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; } 

 
   
 
 
Sign In
 
 Email  Password  
 
Forgot Password? 
    
 
 
 Don't have an account? Sign Up!  
 
  
 
 
 
Sign up
 
 
 UserName  
 Email  Password  
    
  
 Already a member? Sign In