javascript - Jquery addclass 在任何浏览器中都不起作用

Question

我想使用 jquery 将类添加到元素中。我使用了推荐的语法，但 jquery 仍然无法正常工作。我想要的是，当用户单击注册时，他将看到注册表单，否则会登录。另外，我已使用 css 将注册表单设置为隐藏。现在我正在尝试将class .active 添加到元素，但我被卡住了。我的 html 看起来像

jQuery(document).ready(function() {
  $(".signup_form").click(function() {
    $(this).addClass('active');
  });
});

.signup_form {
  visibility: hidden;
}

.active {
  visibility: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form_inner">
  <ul class="user_form_nav">
    <li class="login_form" name="login">
      <a href="#loginform">Login</a>
    </li>
    <li class="signup_form" id="signup" name="signup">
      <a href="#signupform">SignUp</a>
    </li>
  </ul>
   </div>

任何建议。

标签： javascriptjquery

Answer 1

.show()您可以使用和切换登录表单和注册表单.hide()；

我添加了一个片段，希望这是您想要实现的目标。干杯..:D

jQuery(document).ready(function() {
  $(".signup_form").click(function(e) {
    e.preventDefault();
    $('#sign-up-form').show();
    $('#login-form').hide()
  });
  $('#login').on('click', function(e){
    e.preventDefault();
    $('#sign-up-form').hide();
    $('#login-form').show()
  })
});

.active {
  display: block;
}
.sign-up{
  display:none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form_inner">
  <ul class="user_form_nav">
    <li class="login_form" id="login" name="login">
      <a href="#loginform">Login</a>
    </li>
    <li class="signup_form" id="signup" name="signup">
      <a href="#signupform">SignUp</a>
    </li>
  </ul>
  
  <div id="login-form">
    <h2>Login Form</h2>
  </div>
  <div class="sign-up" id="sign-up-form">
    <h2> Sign Up Form</h2>
  </div>