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的元素上，而不是它的子元素）它应该按你的意愿工作：

Demo

CSS addClass不会更改背景图像

1 个答案: