Question

我的网页位于http://www.sarahjanetrading.com/js/status

所有HTML，CSS和jQuery代码+图像都可供任何人访问。

我的问题是，目前我只使用jQuery代码在列表项中切换活动状态。我想要的是，一个列表项在单击时变为活动（活动类），所有其他项必须删除活动类。

由于

Answer 1

我不是100％确定我遵循你想要做的事情，但是这段代码将从所有其他兄弟中移除活动类并切换当前的一个，因此活动类中永远不会有多个项目。

$(function() {
    $('#status li').click(function(){
        var self = $(this);
        self.siblings().removeClass('active');
        self.toggleClass('active');
    });
});

如果您想要的是当前点击的项目变为活动状态而其他所有项目变为非活动状态，那么您根本不想使用toggleClass。你可以用这个更简单地做到这一点：

$(function() {
    $('#status li').click(function(){
        var self = $(this);
        self.siblings().removeClass('active');
        self.addClass('active');
    });
});

Answer 2

$(function() {
    var lis = $('#status li');
    lis.click(function() {
        lis.removeClass('active won-active');
        $(this).addClass('active')
    });

    lis.filter('.won').click(function() {
        $(this).toggleClass('won-active')
    });
});

这是一个有效的jsFiddle：http://jsfiddle.net/thomas_peklak/smMT5/1/

Answer 3

与jfriend00类似的代码，只是更清洁一点。假设没有其他代码一次设置多个活动...

$(function() { 
    $('#status li').click(function(){ 
        $(this).siblings().andSelf().toggleClass('active'); 
    }); 
});

jQuery函数当一个列表项具有活动类时，我希望所有其他列表项自动不具有活动类？

3 个答案: