如何实现仅为当前点击的li元素添加背景色？

你的问题出在两个地方：一是当前代码只给点击的<a>元素加背景色，但你要的是<li>的背景色；二是没有清除其他已点击元素的背景色，导致所有点击过的元素都保留颜色。下面是两种调整方案：

方案一：使用CSS类（推荐，样式与逻辑分离） #

这种方式更符合前端开发规范，便于后续样式维护。

1. 先定义一个激活状态的CSS类：

.active-tab {
  background-color: #216180;
}

2. 修改jQuery脚本，点击时先移除所有<li>的激活类，再给当前点击元素的父级<li>添加类：

$('.tab').on("click", function() {
  // 移除导航下所有li的激活类
  $('#Nav li').removeClass('active-tab');
  // 给当前点击a标签的父级li添加激活类
  $(this).parent('li').addClass('active-tab');
});

3. 修正HTML里的错误（第三个<a>标签多了个无效的h属性）：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<ul id="Nav">
  <li><a class="tab">aa</a></li>
  <li><a class="tab">bb</a></li>
  <li><a class="tab">cc</a></li>
</ul>

方案二：直接操作CSS（适合快速调试） #

如果不想新增CSS类，可以直接通过jQuery重置所有<li>的背景色，再设置当前元素的样式：

$('.tab').on("click", function() {
  // 清空导航下所有li的背景色
  $('#Nav li').css('backgroundColor', '');
  // 给当前点击a标签的父级li设置背景色
  $(this).parent('li').css('backgroundColor', '#216180');
});

内容的提问来源于stack exchange，提问作者sam