在jQuery / JavaScript中切换类以获取活动/非活动状态

Question

我想要做的是，当您点击“登录”时，它会将“注册”按钮更改为“非活动”类，反之亦然。因此，您点击的按钮是白色的，突出显示，未使用的按钮会褪色。

Active/inactive state

您可以看到上面的图片，注册表单处于非活动状态，并且登录表单处于活动状态。

但是我现在的代码，当我在2之间点击时，它们都会变为“活动”并且不会切换回来。

$(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 - 类用于所有其他（常规）按钮。 然后，切换活动状态就像听起来一样简单：

＆＃13;

＆＃13;

$(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
  })
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果你想要使用2个类：首先我们应该删除这两个类，然后为元素设置默认的非活动状态，然后为发生单击的元素设置活动状态。试试这段代码：

＆＃13;

＆＃13;

$(document).ready(function() {
    $("#sidebarmenu a").on("click", function() {
        $(this).parents("#sidebarmenu").find("a").removeClass("activebtn inactivebtn").addClass("inactivebtn");;
        $(this).removeClass("inactivebtn").addClass("activebtn");
    });
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

或者你是一个.each循环并检查dom上的哪个类并执行你的类切换。

$(".activebtn, .inactivebtn").each(function(index, key){
    if(key.className == "activebtn"){
       $(this).removeClass("activebtn").addClass("inactivebtn")
    }else if(key.className == "inactivebtn"){
       $(this).removeClass("inactivebtn").addClass("activebtn")        
    }
})

＆＃13;

＆＃13;

$(document).ready(function(){
  setTimeout(function(){
  	$(".activebtn, .inactivebtn").each(function(index, key){
		if(key.className == "activebtn"){
    	$(this).removeClass("activebtn").addClass("inactivebtn")
    }else if(key.className == "inactivebtn"){
    	$(this).removeClass("inactivebtn").addClass("activebtn")        
    }
})
  }, 500)
})

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;