jQuery点击切换内容时如何为点击后的按钮添加高亮保持效果

你已经提前写好了.active类的高亮样式，只需要统一管理按钮的类名切换即可，以下是精简后的可扩展实现方案：

优化后代码 #

1. 直接可用版本（无需修改现有HTML和CSS，替换原有JS即可生效） #

$(document).ready(function() {
  // 提前缓存DOM元素，避免重复查询提升性能
  const $allBtns = $('.frequency button');
  const $allContent = $('.content1, .content2');

  // 初始化状态：默认显示content2，对应给button2加高亮
  $('#button2').addClass('active');

  // 统一绑定所有按钮的点击事件，无需单独给每个按钮写监听
  $allBtns.click(function() {
    // 第一步：清空所有按钮的高亮，隐藏所有内容
    $allBtns.removeClass('active');
    $allContent.hide();

    // 第二步：给当前点击的按钮加高亮
    $(this).addClass('active');

    // 第三步：显示对应内容
    $(this).is('#button1') ? $('.content1').show() : $('.content2').show();
  });
});

2. 可选扩展版本（后续新增按钮无需修改JS） #

如果后续可能增加更多按钮和对应内容，可以通过data-target属性绑定按钮和对应内容，可扩展性更强：

修改后的HTML（仅调整按钮部分）

<div class="frequency">
  <button data-target=".content1">button1text</button>
  <button data-target=".content2">button2text</button>
  <!-- 后续加第三个按钮只需要新增对应行，同步加content3的DOM即可，不用改JS -->
  <!-- <button data-target=".content3">button3text</button> -->
</div>
<!-- 其余HTML代码保持不变 -->

对应JS代码

$(document).ready(function() {
  const $allBtns = $('.frequency button');
  // 建议给所有内容块加统一类名content-item，后续新增内容不用修改这行选择器
  const $allContent = $('.content1, .content2');

  // 初始化默认高亮，eq(1)对应第二个按钮，要默认第一个高亮改成eq(0)即可
  $allBtns.eq(1).addClass('active');

  $allBtns.click(function() {
    const targetContent = $(this).data('target');
    $allBtns.removeClass('active');
    $(this).addClass('active');
    $allContent.hide();
    $(targetContent).show();
  });
});

方案优势 #

• 无重复逻辑，代码结构清晰易维护
• 提前缓存DOM选择器，减少重复DOM查询，性能更优
• 扩展版本适配后续需求变化，新增按钮无需修改JS逻辑

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