如何实现点击切换span背景色，移除其他选中项样式

嘿，这个需求其实是很典型的单选式高亮场景，你已经有了不错的基础代码，我来帮你把逻辑理顺，确保每次点击只有当前目标span显示背景色~

完整可运行实现代码 #

HTML 结构

<ul>
  <li> <a href=""><span class="list"></span>Electronics</a> </li>
  <li> <a href=""><span class="list"></span>Clothes</a> </li>
  <li> <a href=""><span class="list"></span>Home & Office</a> </li>
</ul>

CSS 样式

ul { 
  list-style: none; 
  font-size: 14px; 
  padding: 7px 0 7px 23px; 
}
ul li a { 
  color: #676a74; 
  text-decoration: none; 
}
ul li a span { 
  float: left; 
  width: 11px; 
  height: 11px; 
  margin-left: -13px; 
  margin-right: 5px; 
  top: 4px; 
  border: 1px solid #d1d3d7; 
  position: relative; 
  transition: all 0.5s ease-in-out; 
}
ul li a span.active { 
  background: green; 
}

jQuery 交互逻辑

$('ul li a').click(function(e) {
    // 阻止a标签默认的跳转/刷新行为
    e.preventDefault();
    // 清除所有已选中span的高亮状态
    $('ul li a span.active').removeClass('active');
    // 给当前点击项的span添加高亮类
    $(this).find('.list').addClass('active');
});

逻辑拆解说明 #

1. 阻止默认行为：e.preventDefault() 是关键，因为你的a标签是空链接，点击会触发页面刷新，这一步能让交互在当前页面正常进行。
2. 清除之前的选中状态：每次点击时，先找到所有带有 active 类的span，移除这个类——这样之前选中的项就会立刻失去绿色背景。
3. 设置当前选中状态：$(this) 指代当前被点击的a标签，通过 find('.list') 定位到它内部的span，给这个span加上 active 类，就能显示你设置的绿色背景了。

可选优化：默认选中第一项 #

如果希望页面加载完成后就有一个默认选中的选项，可以在HTML里直接给第一个span加上 active 类，或者用jQuery初始化：

$(document).ready(function() {
    // 页面加载完成后，默认选中第一个分类的span
    $('ul li:first-child a span').addClass('active');
});

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