javascript - 表单相互重叠，如何默认隐藏表单并在 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_form display: 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>

希望这有帮助!