本文介绍一种简洁可靠的 jQuery 方式，实现点击标签时为其添加 .active 类，并同步控制同级容器内 .filter 文本的 .active 状态与样式（如变蓝），支持多标签切换及状态实时清理。
本文介绍一种简洁可靠的 jquery 方式，实现点击标签时为其添加 `.active` 类，并同步控制同级容器内 `.filter` 文本的 `.active` 状态与样式（如变蓝），支持多标签切换及状态实时清理。
在前端交互开发中，常需实现“标签激活 → 关联内容高亮”的联动效果。例如：点击某个 .tag 链接后，为其添加 .active 样式（如变红），同时让同一容器下的 .filter 文本也获得 .active 类以触发蓝色字体；而当所有标签均未激活时，.filter 的蓝色样式应自动移除。
关键问题在于避免多个独立事件处理器导致的状态冲突（如原代码中两个 click 监听器分别操作 .active，易引发竞态或冗余逻辑）。推荐采用单事件处理器 + 状态解耦策略：
✅ 核心优化点：
jQuery 1.12.4
下载
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
- 使用
toggleClass('active')替代手动判断data('clicks')，语义更清晰、逻辑更健壮； - 将
.filter的状态更新抽离为独立函数updateFilter()，确保状态同步逻辑集中可控； - 通过
$('.tag.active').length > 0动态判断是否存在激活标签，作为.filter.active的开关依据，天然支持多标签场景下的“任意一标签激活即高亮，全取消则还原”。
以下是完整可运行的实现代码：
<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()是良好实践，避免<a></a>标签默认行为干扰交互； - 若需支持「单选模式」（即一次仅一个标签可激活），可先调用
$('.tag').removeClass('active')再为当前元素加类； - CSS 中建议为
.filter.active显式声明font-weight: bold（呼应标题中 text filter will be bold 的需求）； - 此方案具备良好可扩展性——如后续需增加更多联动元素，只需在
updateFilter()中补充对应逻辑即可。
该方法结构清晰、无冗余状态管理，兼顾可读性与鲁棒性，是处理此类 DOM 状态联动的理想实践。
