内容显示时如何编辑按钮文本及修改字体颜色与粗细？

实现思路 #

核心是在内容区块显示状态确定后，找到对应的触发按钮，修改其文本和样式。推荐用data属性关联按钮和内容区块，通过CSS类控制样式（比直接操作style更易维护）。

完整代码示例 #

HTML结构 #

先定义按钮和对应的内容区块，用data-target绑定按钮和内容的ID：

<button class="toggle-btn" data-target="content1">显示内容1</button>
<button class="toggle-btn" data-target="content2">显示内容2</button>
<button class="toggle-btn" data-target="content3">显示内容3</button>

<div class="content-block" id="content1">内容区块1</div>
<div class="content-block" id="content2" style="display:none;">内容区块2</div>
<div class="content-block" id="content3" style="display:none;">内容区块3</div>

CSS样式 #

定义按钮激活状态的样式（区块显示时按钮的样式）：

.toggle-btn.active {
  color: #e74c3c; /* 自定义高亮颜色 */
  font-weight: 700; /* 加粗 */
}

jQuery逻辑 #

先保存按钮初始文本，点击时切换内容区块，再根据区块显示状态修改按钮：

$(document).ready(function() {
  // 预存每个按钮的初始文本，用于后续重置
  $('.toggle-btn').each(function() {
    $(this).data('original-text', $(this).text());
  });

  $('.toggle-btn').on('click', function() {
    const $btn = $(this);
    const targetId = $btn.data('target');
    const $targetContent = $('#' + targetId);

    // 重置所有内容区块和按钮状态
    $('.content-block').hide();
    $('.toggle-btn').removeClass('active').text(function() {
      return $(this).data('original-text');
    });

    // 显示目标内容区块
    $targetContent.show();

    // 修改当前按钮的文本和样式
    $btn.text('已显示' + $btn.data('original-text').replace('显示', '')).addClass('active');
  });
});

处理动画切换场景 #

如果用slideToggle/fadeToggle这类带动画的切换，要在动画完成后再修改按钮状态，避免样式提前变化：

$('.toggle-btn').on('click', function() {
  const $btn = $(this);
  const targetId = $btn.data('target');
  const $targetContent = $('#' + targetId);
  const originalText = $btn.data('original-text');

  // 先隐藏其他内容，重置其他按钮
  $('.content-block').not($targetContent).hide();
  $('.toggle-btn').not($btn).removeClass('active').text(function() {
    return $(this).data('original-text');
  });

  // 执行动画切换，完成后修改当前按钮
  $targetContent.slideToggle(300, function() {
    if ($targetContent.is(':visible')) {
      $btn.text('已显示' + originalText.replace('显示', '')).addClass('active');
    } else {
      $btn.text(originalText).removeClass('active');
    }
  });
});

关键说明 #

1. 用data属性保存初始文本，避免硬编码重置内容，扩展性更强；
2. 用CSS类控制样式，后续修改样式只需调整CSS，无需改动JS；
3. 先重置所有状态再处理当前按钮，确保同一时间只有一个激活状态的按钮和显示的内容区块。

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