如何用jQuery为指定<h4>下方的<p>标签添加.active类

DevOps 小满

2026-5-13

解决方案：无需额外类，用jQuery遍历实现分组激活

首先先确认你的HTML结构是这样的（和你描述的一致）：

<h4>Option 1</h4>
<p>Foo</p>
<p>Bar</p>
<p>Baz</p>
<h4>Option 2</h4>
<p>abc</p>
<p>def</p>
<p>ghi</p>
<!-- ... 直到 Option 1000 -->
<h4>Option 1000</h4>
<p>123</p>
<p>456</p>
<p>789</p>

完全不需要给每组加重复类，用jQuery的nextUntil()方法就能精准定位每个h4对应的p元素，实现点击激活的效果。下面是针对jQuery 3.2.1的代码：

基础版本（排他性激活：点击一个h4时，其他组的active会被移除）

$(document).ready(function() {
  // 给所有h4绑定点击事件
  $('h4').on('click', function() {
    // 第一步：移除所有h4和对应p的.active类（重置状态）
    $('h4, h4 ~ p').removeClass('active');
    
    // 第二步：给当前点击的h4添加.active类
    $(this).addClass('active');
    
    // 第三步：选中当前h4之后、直到下一个h4之前的所有p，添加.active类
    $(this).nextUntil('h4').addClass('active');
  });
});

可选：切换当前组的激活状态（点击同一个h4可以取消激活）

如果需要支持点击同一个h4时，切换它的激活状态（而不是强制激活），可以稍微调整代码：

$(document).ready(function() {
  $('h4').on('click', function() {
    const $currentH4 = $(this);
    const isActive = $currentH4.hasClass('active');
    
    // 先移除所有激活状态
    $('h4, h4 ~ p').removeClass('active');
    
    // 如果当前h4之前没有激活，就添加激活类
    if (!isActive) {
      $currentH4.addClass('active');
      $currentH4.nextUntil('h4').addClass('active');
    }
  });
});