jquery - 活动和非活动类添加和删除

Question

我需要在单击锚标记时添加和删除类。

 <div class="activeTab">
    <a href="#." class="active">Active</a>
    <a href="#.">Inactive</a>
</div>

上面的 div 有两个锚标签和“活动”和“非活动”一个有一个“活动”类。我的要求是需要在单击“非活动”锚标记时删除该“活动”类并将“活动”类添加到单击的“非活动”锚点，如果我再次单击“活动”锚点，该类将删除表单“非活动” " 锚点 & 将添加到“活动”锚点。用jQuery。

Answer 1

如果我没理解好...

我做了一个旧的 lil 片段的 refork 做你想要的（或者我猜你想要的）xDD

对不起，我的英语，我很难在上面写字。

HTML

<div class="container">

  <div class="activeTab">
      <a href="#." class="button_active">Active</a>
      <a href="#." class="button_inactive">Inactive</a>
  </div>

</div>

CSS

.activeTab { width:100%; padding:30px 0 20px 0; background:#fff; } 
.active { background: #f0f0f0; }

JS

$(function() { $( ".button_active" ).click(function() {

$( ".activeTab" ).addClass("active");

return false; }); });

$(function() { $( ".button_inactive" ).click(function() {

$( ".activeTab" ).removeClass("active");

return false; }); });

您可以在 JSFiddle http://jsfiddle.net/aritz81/74bGe/1/上看到一个工作演示

Answer 2

$('div.activeTab a').click(function(){
    var $this = $(this);
    $this.parent().find('a').removeClass('active');
    $this.addClass('active');
})

Answer 3

尝试这个

$('div.activeTab a').click(function () {
  var $this = $(this);
   $this.siblings().removeClass();
   if ($this.hasClass('active')) {
      $this.removeClass('active').addClass('inactive')
   } else {
      $this.removeClass('inactive').addClass('active');
  }

})

在这里工作小提琴