CSS addClass不会改变背景图像

当我使该按钮处于活动状态时，我想应用图像“bars_small.png”（这是您在悬停时看到的白色图像）。CSS addClass不会改变背景图像

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/

来源

2013-10-02 Trace

'.ch-grid .btn_header_active'在哪里？ – CodingIntrigue

我更新了;我从回调函数中删除了addClass方法。我想实现的是，'btn_header_active'类首先从所有菜单项中删除，然后重新应用到当前活动的菜单按钮。 – Trace

在你的小提琴中，你正试图将'btn_header_active'类添加回刚刚取下它的物品，同时你的css选择器也是错误的，它应该是'＃btn_bars.btn_header_active .ch-info' [try这]（http://jsfiddle.net/peteng/6ryav/6/） – Pete

如果你改变你的点击功能如下：

$(".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

来源

2013-10-02 13:06:31 Pete

非常感谢，事实上，这是我第一次听到这种差异。我检查了这个有用的文章：http://css-tricks.com/multiple-class-id-selectors/ – Trace

不客气，很高兴我可以帮助 – Pete

CSS addClass不会改变背景图像

回答

相关问题