表單相互隱藏，默認情況下隱藏一個，點擊html時可見css

Question

註冊和登錄表單相互之間如何隱藏一個，但當我點擊登錄或註冊按鈕時它會告訴我這種形式，我試過visibility:hidden;和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; 
 
}

<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>E-mail</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 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"> 
 
     <h2>Sign up</h2> 
 
     <form action="#" autocomplete="on" method="post"> 
 
     <form action="#" method="post"> 
 
      <label>UserName</label> 
 
      <input type="text" class="name" Name="Name" required=""> 
 
      <label>E-mail</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 href="#tologin" class="to_register">Sign In</a> 
 
     </p> 
 
     <div class="clear"></div> 
 
     </form> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

您可以使用jQuery爲此，如：

// I've changed the class name for better reference 

// When someone clicks on 'Sign Up' button 
$('.to_register').on('click', function() { 
    $('.signin_form').css('display', 'none'); 
    $('.signup_form').css('display', 'block'); 
}); 

// When someone clicks on 'Sign In' button 
$('.to_login').on('click', function() { 
    $('.signup_form').css('display', 'none'); 
    $('.signin_form').css('display', 'block'); 
}); 

而在你的CSS作出缺席.signup_formdisplay: none

看一看下面的代碼片段：

$('.to_register').on('click', function() { 
 
    $('.signin_form').css('display', 'none'); 
 
    $('.signup_form').css('display', 'block'); 
 
}); 
 

 
$('.to_login').on('click', function() { 
 
    $('.signup_form').css('display', 'none'); 
 
    $('.signin_form').css('display', 'block'); 
 
});

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

 
.signup_form { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container_demo"> 
 
<a class="hiddenanchor" id="tologin"></a> 
 
<a class="hiddenanchor" id="toregister"></a> 
 
<div id="wrapper"> 
 

 
<div id="login" class="signin_form animate form"> 
 
<h2>Sign In</h2> 
 
<form class="" action="#" autocomplete="on" method="post"> 
 
<label>E-mail</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 href="#toregister" class="to_register">Sign Up!</a> 
 
</p> 
 
<div class="clear"></div> 
 
</form> 
 

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

 
<div id="register" class="signup_form animate form"> 
 
<h2>Sign up</h2> 
 
<form action="#" autocomplete="on" method="post"> 
 
<form action="#" method="post"> 
 
<label>UserName</label> 
 
<input type="text" class="name" Name="Name" required=""> 
 
<label>E-mail</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 href="#tologin" class="to_login">Sign In</a> 
 
</p> 
 
<div class="clear"></div> 
 
</form> 
 
</div> 
 

 
</div> 
 
</div>

希望這有助於！

Answer 2

您可以添加hide css並給id登錄和註冊鏈接。 相應的鏈接添加click事件和切換hide類，如下所示，

$(document).ready(function() { 
 

 
    $("a#signup").click(function() { 
 
    $("div#login").addClass("hide"); 
 
    $("div#register").removeClass("hide"); 
 
    }); 
 

 
    $("a#signin").click(function() { 
 
    $("div#register").addClass("hide"); 
 
    $("div#login").removeClass("hide"); 
 
    }); 
 
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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>E-mail</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" class="name" Name="Name" required=""> 
 
      <label>E-mail</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>