使用JavaScript与CSS类实现按钮切换时点击button2误选button3问题

问题原因 #

你当前的togbtn9函数逻辑是只要触发就同时切换3个按钮的样式类，没有区分当前点击的目标按钮。初始状态下只有b1是激活状态（blueback类），点击任意按钮时三个按钮的类都会同步翻转，自然就会出现同时有两个按钮变成激活状态的异常。

修复方案 #

1. 调整HTML的点击事件绑定 #

给每个按钮的onclick属性传入当前点击的元素自身：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-12 f9">
  <div class="btn-group">
    <button type="button" id="b1" onclick="togbtn9(this)" class="btn blueback f9 noround">Button1</button>
    <button type="button" id="b2" onclick="togbtn9(this)" class="btn f9 greyback noround">Button2</button>
    <button type="button" id="b3" onclick="togbtn9(this)" class="btn f9 greyback noround">Button3</button>
  </div>
</div>

2. 重写JS逻辑 #

先统一把所有按钮重置为非激活样式，再单独给当前点击的按钮设置激活样式即可：

function togbtn9(currentBtn) {
  // 所有按钮重置为非激活状态
  $(".btn-group .btn").removeClass("blueback").addClass("greyback");
  // 当前点击的按钮设置为激活状态
  $(currentBtn).removeClass("greyback").addClass("blueback");
}

原有CSS样式无需修改，可以直接保留使用。

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