Question

我有一个带有一堆列表项的无序列表。我在其点击中设置了所选<li>的背景：

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

当我点击另一个<li>时，我想更改其backgroundColor属性，但我希望<li>的其余部分默认返回另一种颜色。这样，看起来我正在改变选定状态。

Answer 1

您可以执行以下操作：

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

<强> Example on 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", "");

});

如何在jquery中更改所选li的背景？

4 个答案: