本文介绍一种简洁可靠的 jQuery 方式，实现点击标签时为其添加 .active 类，并同步控制同级容器内 .filter 文本的 .active 状态与样式（如变蓝），支持多标签切换及状态实时清理。

本文介绍一种简洁可靠的 jquery 方式，实现点击标签时为其添加 `.active` 类，并同步控制同级容器内 `.filter` 文本的 `.active` 状态与样式（如变蓝），支持多标签切换及状态实时清理。

在前端交互开发中，常需实现“标签激活 → 关联内容高亮”的联动效果。例如：点击某个 .tag 链接后，为其添加 .active 样式（如变红），同时让同一容器下的 .filter 文本也获得 .active 类以触发蓝色字体；而当所有标签均未激活时，.filter 的蓝色样式应自动移除。

关键问题在于避免多个独立事件处理器导致的状态冲突（如原代码中两个 click 监听器分别操作 .active，易引发竞态或冗余逻辑）。推荐采用单事件处理器 + 状态解耦策略：

✅ 核心优化点：

• 使用 toggleClass('active') 替代手动判断 data('clicks')，语义更清晰、逻辑更健壮；
• 将 .filter 的状态更新抽离为独立函数 updateFilter()，确保状态同步逻辑集中可控；
• 通过 $('.tag.active').length > 0 动态判断是否存在激活标签，作为 .filter.active 的开关依据，天然支持多标签场景下的“任意一标签激活即高亮，全取消则还原”。

以下是完整可运行的实现代码：

jQuery 1.12.4

jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script><style>
.tag.active { color: red; text-decoration: none; }
.filter.active { color: blue; font-weight: bold; }
</style><div class="wrap">
  <p class="filter">filter</p>
  <div class="tag-wrap">
    <a class="tag" href="#">tag 1</a>
    <a class="tag" href="#">tag 2</a>  
    <a class="tag" href="#">tag 3</a>
  </div>
</div>

<script>
function updateFilter() {
  const hasActiveTag = $('.tag.active').length > 0;
  $('.filter').toggleClass('active', hasActiveTag);
}

$('.tag').click(function(e) {
  e.preventDefault(); // 防止 a 标签默认跳转
  $(this).toggleClass('active');
  updateFilter();
});
</script>

? 注意事项：

• 添加 e.preventDefault() 是良好实践，避免 标签默认行为干扰交互；
• 若需支持「单选模式」（即一次仅一个标签可激活），可先调用 $('.tag').removeClass('active') 再为当前元素加类；
• CSS 中建议为 .filter.active 显式声明 font-weight: bold（呼应标题中 text filter will be bold 的需求）；
• 此方案具备良好可扩展性——如后续需增加更多联动元素，只需在 updateFilter() 中补充对应逻辑即可。

该方法结构清晰、无冗余状态管理，兼顾可读性与鲁棒性，是处理此类 DOM 状态联动的理想实践。