jquery - CSS addClass 不会改变背景图像

Question

当我激活此按钮时，我想应用图像“bars_small.png”（这是您在悬停时看到的白色图像）。

jQuery：

        $("#btn_bars").click(function(){
            if(!$(this).hasClass('btn_header_active')){
                    $('.ch-grid .btn_header_active').removeClass('.btn_header_active');
                    $(this).addClass('btn_header_active');
                });
            }
        });

CSS：

#btn_bars .btn_header_active .ch-info{

    background-image: url(http://www.zwoop.be/develop/images/fisheye/bars_small.png);
    background-repeat: no-repeat;
    background-position: center;
}

完整的菜单代码和视觉效果参考这个jsFiddle：http: //jsfiddle.net/kimgysen/6ryav/

Answer 1

如果您将点击功能更改为以下内容：

$(".ch-item").click(function(){
    var thisButton = $(this);
    if(!thisButton.hasClass('btn_header_active')){
        $('.ch-grid .btn_header_active').removeClass('btn_header_active');
        thisButton.addClass('btn_header_active');
        active_header = 1;
    }
});

然后将您的 css 选择器从更改#btn_bars .btn_header_active .ch-info为#btn_bars.btn_header_active .ch-info（id 和第一类之间没有空格，因为该类位于具有 id 的元素上，而不是它的子元素）它应该可以按您的意愿工作：

演示