无法更改 UL 中所选 li 项目的背景颜色

Unable to change the background color of the selected li item in a UL

本文关键字：项目 li 背景 颜色 UL      更新时间：2023-09-26

我需要你的帮助，

如何更改 UL 列表中所选 LI 项目的背景（使用 jQuery）。就像现在一样，唯一改变的是我列表的整个背景。最后要注意的是，如果选择了新的 LI 项目，颜色应默认为白色。

<!DOCTYPE html>
<html>
<script src="jquery.min.js"></script> 
<head>
<style type="text/css">
#container {
    width: 200px;
}
#list1 {
    border: 1px solid red;
    width: 100%;
}
#list1 ul {
    margin: 0;
    padding: 3px;
    list-style-type: none;
}
#list1 li {
    cursor: default;
}
.selected {
    background: blue;
}
</style>
<script type="text/javascript">
window.onload = function() {
$('#list1').click(function(){
  var that = $(this);
  that.closest('li').find('.selected').removeClass('selected');
  that.addClass('selected');
});
}
</script>
</head>
<body>
<div id="container">
    <div id="list1">
        <ul>
          <li>Coffee</li>
          <li>Tea</li>
          <li>Milk</li>
        </ul>
    </div>
</div>
</body>
</html>

试试这个：

var $items = $('#list1 li').click(function() {
    $items.removeClass('selected');
    $(this).addClass('selected');
});

没有理由继续为此任务选择新元素。只需创建所有列表项（$items) ）的集合，并重用它来从上一项中删除selected类。

这里不需要.closest()，因为#list1是你li的祖先：

that.find('li.selected').removeClass('selected');

但实际上，我认为您要做的是将.active添加到单击的li并从其他li中删除此active类，如果是这种情况，那么您可以执行以下操作：

$('#list1 ul li').click(function () {
    $('#list1 ul li').removeClass('selected');
    $(this).addClass('selected');
});

小提琴演示

相关文章：