Question

假设我有3个div，每个div有item个类，一次只能有一个active个。例如：

<div class="item active">1</div>
<div class="item">2</div>
<div class="item">3</div>

我有一个jQuery绑定代码，用于激活click事件中的div：

$(document).ready(function () {
    $('.item').bind('click', function() {
        addClass('active');        
        // now I need to remove active class from the previous selected item
    });
});

如果我要从其他任何可能处于活动状态的div中删除活动类，最好的管理方式是什么？

提前致谢。

Answer 1

你需要使用$(this).addClass，而不仅仅是它自己，你也可以预先从active类的所有元素中删除active类，如下所示：

$(document).ready(function () {
    $('.item').bind('click', function() {
        // remove the active class from all elements with active class
        $('.active').removeClass('active')
        // add active class to clicked element
        $(this).addClass('active');
    });
});

Answer 2

作为一个班轮，您可以添加活动类，然后将其从所有兄弟姐妹中删除

$(this).addClass('active').siblings().removeClass('active')

在此处查看演示：http://jsfiddle.net/nAnpn/1/

Answer 3

这可以做到：

$(document).ready(function () {
    var $items = $('.item');
    $items.bind('click', function() {
        $items.removeClass('active');
        $(this).addClass('active');
    });
});

使用此解决方案，您只需查找一次项目。所以请记住，未来.item元素将无法按预期运行，但速度会更快。

Answer 4

$(this).siblings().removeClass('active');

Answer 5

Working Demo

 $(document).ready(function() {
        $('.item').bind('click', function() {
            $('.item').removeClass('active').filter($(this)).addClass('active');
        });
    });

Answer 6

在将其添加到新类之前，只需将其从所有div类中删除：

$('.item').removeClass('active');
$(this).addClass('active');

这样您就不必担心跟踪上一个活动元素，只需从中删除并添加到所选元素。

Answer 7

在添加“活动”类之前，您应该删除当前的“活动”类。

$(document).ready(function () {
    $('.item').bind('click', function() {
        addClass('active');        
        $('.item').removeClass('active');
    });
});

Answer 8

我有一个类似的问题，并希望离开这种方法。这保留了从其他元素中删除活动类的能力，并且仍然允许点击的元素切换，需要。

$(".item").click(function(){
    $('.active').not(this).removeClass('active');
    $(this).toggleClass('active');      
});

Answer 9

嗯，我在这方面不是很好但是如何删除课程，只重新添加项目，如：

$('div').removeClass('item active').addClass('item');

Answer 10

首先，我建议将它们全部放在一个容器中。然后，您可以从所有兄弟姐妹中删除active类（如果您希望整个页面中有多个项目组）。

$(function() {
  $(".item").click(function() {
    var $this = $(this);                           // store jQuery object
    $this.siblings(".item").removeClass("active"); // remove from all .items
    $this.addClass("active");                      // add to clicked item
  });
});

jsFiddle example

另请注意，如果您正在设计最好用单选按钮表示的内容，则可以使用HTML和CSS对checked元素进行基本样式设置：

HTML+CSS example for forms

只有一个活动div允许使用jQuery

10 个答案: