如何更改jquery中選定li的背景？

Question

我有一個帶有一堆列表項的無序列表。 我在單擊時設置所選<li>的背景：

$(this).animate({
          backgroundColor: '#0000FF'
}, 'fast');

當我單擊另一個<li> ，我想更改其backgroundColor屬性，但我希望其余的<li>都默認恢復為另一種顏色。 這樣，看來我正在更改所選狀態。

Answer 1

您可以簡單地執行以下操作：

$(this).siblings("li").css("backgroundColor", "");

jsfiddle上的示例

Answer 2

$('ul li').click(function() {
    $(this).animate({backgroundColor:"#0000ff"},'fast')
        .siblings().animate({backgroundColor:"#000000"},'fast'); // or whatever other color you want
});

Answer 3

我將使用類和CSS過渡的混合 ：

$('li').click(function(){)
    $('li.active').removeClass('active');
    $(this).addClass('active');
})

li{background:#fff; -webkit-transition:all 0.25s linear; -moz-transition:all 0.25s linear;}
li.active{background:#00f;}

Answer 4

$('li').each.click(function(){
 $(this).css("backgroundColor", "");

});