要实现点击两个 span 中的一个时，给被点击的 span 添加 "on" 类，同时从另一个 span 移除 "on" 类，可以使用以下 jQuery 代码：
HTML 结构示例

<div class="container">
  <span class="option">选项1</span>
  <span class="option">选项2</span>
</div>

关键点说明

  1. $(this) - 指代当前被点击的 span 元素

  2. .siblings('.option') - 选择同一容器内的其他 span 元素

  3. .addClass('on') - 添加 on 类

  4. .removeClass('on') - 移除 on 类

  5. 方法链式调用可以简化代码

这种方法可以实现两个 span 之间的类切换效果，常用于选项卡、单选按钮等交互场景。

 
JavaScript 代码：方法1：直接使用 click 事件【复制】 
$('.container .option').click(function() {
  // 移除另一个 option 的 on 类
  $(this).siblings('.option').removeClass('on');
  // 给当前点击的 option 添加 on 类
  $(this).addClass('on');
});
JavaScript 代码：方法2：先检查是否有 on 类再操作【复制】 
$('.container .option').click(function() {
  if (!$(this).hasClass('on')) {
    $(this).addClass('on').siblings('.option').removeClass('on');
  }
});
JavaScript 代码：方法3：使用事件委托（适合动态内容）【复制】 
$('.container').on('click', '.option', function() {
  $(this).addClass('on').siblings('.option').removeClass('on');
});
JavaScript 代码：完整示例【复制】 【运行】
<!DOCTYPE html>
<html>
<head>
  <style>
    .on {
      color: red;
      font-weight: bold;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div class="container">
    <span class="option">选项1</span>
    <span class="option">选项2</span>
  </div>

  <script>
    $(document).ready(function() {
      $('.container .option').click(function() {
        $(this).addClass('on').siblings('.option').removeClass('on');
      });
    });
  </script>
</body>
</html>