javascript - 在 jQuery/JavaScript 中为事件/非事件状态切换类

Question

我想做的是，当您单击“登录”时，它会将“注册”按钮更改为“非事件”类，反之亦然。因此，您单击的按钮是白色的并且突出显示，而未使用的按钮是淡色的。

Active/inactive state

如上图所示，注册表单处于非事件状态，登录表单处于事件状态。

但是我现在拥有的代码，当我在两者之间单击时，它们都变为“事件”并且不会切换回来。

$(function() {
  $('.activebtn').click(function() {
    $('.activebtn').addClass("activebtn");
    $('.activebtn').removeClass("inactivebtn");
    $('.inactivebtn').removeClass('activebtn');
    $('inactivebtn').addClass('inactivebtn');
    $('#signup').slideUp("slow", function() {
      $('#signin').slideDown("slow");
    })
  })
});

$(function() {
  $('.inactivebtn').click(function() {
    $('.inactivebtn').removeClass("inactivebtn");
    $('.inactivebtn').addClass("activebtn");
    $('.activebtn').removeClass("activebtn");
    $('activebtn').addClass("inactivebtn");
    $('#signin').slideUp("slow", function() {
      $('#signup').slideDown("slow");
    });
  });
});

.activebtn {
  opacity: 1;
  text-align: center;
}

.inactivebtn {
  text-align: center;
  opacity: .5;
  transition: opacity .5s ease-out;
  -moz-transition: opacity .5s ease-out;
  -webkit-transition: opacity .5s ease-out;
  -o-transition: opacity .5s ease-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebarmenu">
  <h1><a class="activebtn" href="#">Sign In</a></h1>
  <h1><a class="inactivebtn" href="#">Sign Up</a></h1><br><br>
</div>

我想你大概能猜到我在这里试图做什么，但它并没有像上面解释的那样工作。

Answer 1

您最好只使用一个 .active 类作为事件按钮，而使用一个 .button 类作为所有其他(通用)按钮。然后，切换事件状态就变得像听起来一样容易:

$(function() {
  $('.button').on('click', function() {
    $('.button').removeClass('active'); // reset *all* buttons to the default state
    $(this).addClass('active'); // mark only the click-target as active
  })
});

.button.active{
  opacity: 1;
  text-align: center;
}

.button{
  text-align: center;
  opacity: .5;
  transition: opacity .5s ease-out;
  -moz-transition: opacity .5s ease-out;
  -webkit-transition: opacity .5s ease-out;
  -o-transition: opacity .5s ease-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebarmenu">
      <h1><a class="button active" href="#">Sign In</a></h1>
      <h1><a class="button" href="#">Sign Up</a></h1><br><br>
</div>