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不會改變背景圖像

回答

相關問題