按钮类切换异常：无法添加类实现激活态样式问题求助

我看了你的代码，发现几个关键问题导致点击后无法正确保持激活样式，咱们一步步来修复：

1. HTML结构错误 #

你把input type="radio"直接写在span的属性里了，这完全不符合HTML规范，而且这样的radio根本起不到单选作用。正确的做法是把radio嵌套在label里面（用label能让点击按钮区域或文字都触发选中状态），同时隐藏原生radio，用外层元素模拟按钮样式：

<label class="Button_Main" for="package1">
  <input type="radio" name="layout" id="package1" value="1">
  Package1
</label>
<label class="Button_Main" for="package2">
  <input type="radio" name="layout" id="package2" value="2">
  Package2
</label>
<label class="Button_Main" for="package3">
  <input type="radio" name="layout" id="package3" value="3">
  Package3
</label>
<label class="Button_Main" for="package4">
  <input type="radio" name="layout" id="package4" value="4">
  Package4
</label>

2. JS选择器错误&逻辑问题 #

• 你在package3和package4的点击事件里用了$("package3toggle")，这是明显的选择器错误，应该对应元素的id写成$("#package3")；
• 没有处理单选互斥逻辑：点击一个按钮时，要先移除所有其他按钮的选中类，再给当前按钮添加，否则多个按钮会同时处于选中状态；
• 不需要用toggleClass，因为单选按钮只能有一个选中，直接用addClass配合移除其他类更可靠。

修改后的JS代码：

$(document).ready(function() {
  console.log("document ready");
  // 初始化隐藏不需要显示的span
  $('#span1, #span2, #span4').hide();
  $('#span3').show();

  // 给所有radio绑定统一的点击事件
  $('input[name="layout"]').click(function() {
    const selectedValue = $(this).val();
    // 先隐藏所有内容span
    $('#span1, #span2, #span3, #span4').hide();
    // 显示对应选中值的span
    $(`#span${selectedValue}`).show();

    // 移除所有按钮的选中类，给当前按钮的父元素添加选中类
    $('.Button_Main').removeClass('selected');
    $(this).closest('.Button_Main').addClass('selected');
  });
});

3. CSS简化&优先级优化 #

你写了很多重复的CSS代码，比如.Button_Main.selected和.selected几乎完全一样，其实只需要保留基础按钮样式，然后给hover、focus、选中状态统一设置变化的属性即可：

/* 基础按钮样式 */
.Button_Main {
  color: rgb(255, 255, 255);
  padding: 20px 10px;
  border: 1px solid rgba(0,0,0,0.13);
  border-bottom: 4px solid rgba(0,0,0,0.13);
  box-shadow: inset 0 1px 1px 0 rgba(255,255,255,0.22);
  border-radius: 10px;
  max-width: 520px;
  display: -webkit-inline-box;
  margin: 15px auto 0;
  font-weight: 600;
  background-color: #2fc05a;
  font-size: 28px;
  cursor: pointer;
  position: relative; /* 用于定位隐藏的原生radio */
}

/* 隐藏原生radio，只保留其选中逻辑 */
.Button_Main input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* hover、focus、选中状态统一样式 */
.Button_Main:hover,
.Button_Main:focus,
.Button_Main.selected {
  color: #ffffff !important;
  background: #f6b93b;
  border-color: #f6b93b !important;
  transition: all 0.4s ease 0s;
}

完整工作代码 #

把上面的HTML、JS、CSS组合起来，就能实现：点击按钮切换选中状态（只有一个按钮处于激活样式）、点击后保持hover时的黄色背景样式、对应内容span正确显示/隐藏：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <style>
    .Button_Main {
      color: rgb(255, 255, 255);
      padding: 20px 10px;
      border: 1px solid rgba(0,0,0,0.13);
      border-bottom: 4px solid rgba(0,0,0,0.13);
      box-shadow: inset 0 1px 1px 0 rgba(255,255,255,0.22);
      border-radius: 10px;
      max-width: 520px;
      display: -webkit-inline-box;
      margin: 15px auto 0;
      font-weight: 600;
      background-color: #2fc05a;
      font-size: 28px;
      cursor: pointer;
      position: relative;
    }

    .Button_Main input[type="radio"] {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
    }

    .Button_Main:hover,
    .Button_Main:focus,
    .Button_Main.selected {
      color: #ffffff !important;
      background: #f6b93b;
      border-color: #f6b93b !important;
      transition: all 0.4s ease 0s;
    }
  </style>
</head>
<body>
  <label class="Button_Main" for="package1">
    <input type="radio" name="layout" id="package1" value="1">
    Package1
  </label>
  <label class="Button_Main" for="package2">
    <input type="radio" name="layout" id="package2" value="2">
    Package2
  </label>
  <label class="Button_Main" for="package3">
    <input type="radio" name="layout" id="package3" value="3">
    Package3
  </label>
  <label class="Button_Main" for="package4">
    <input type="radio" name="layout" id="package4" value="4">
    Package4
  </label>

  <div id="span1">Package 1 Content</div>
  <div id="span2">Package 2 Content</div>
  <div id="span3">Package 3 Content</div>
  <div id="span4">Package 4 Content</div>

  <script>
    $(document).ready(function() {
      console.log("document ready");
      $('#span1, #span2, #span4').hide();
      $('#span3').show();

      $('input[name="layout"]').click(function() {
        const selectedValue = $(this).val();
        $('#span1, #span2, #span3, #span4').hide();
        $(`#span${selectedValue}`).show();

        $('.Button_Main').removeClass('selected');
        $(this).closest('.Button_Main').addClass('selected');
      });
    });
  </script>
</body>
</html>

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