点击不同按钮切换对应div显示隐藏的JS实现问题排查

你的切换逻辑失效是三个低级问题导致的：

• 事件绑定逻辑混乱：同时用原生JS和jQuery给按钮绑点击事件，还给2/3/4号按钮的jQuery事件加了e.stopImmediatePropagation()阻断事件传播，而且完全没给1号按钮绑定内容切换逻辑，点第一个按钮不会触发内容更新
• 切换内容时没有重置状态：给目标区块加active显示类之前，没有移除其他内容区块上已有的active类，之前显示的区块自然不会隐藏
• CSS选择器写漏了：红底白字的激活态样式没写.filter-btn.active前缀，按钮激活时根本不会应用样式

不需要改动原有HTML结构，直接修正CSS和JS即可，修复后逻辑更精简，没有冗余代码。

修正后的CSS #

补全按钮激活态的选择器，其余样式保持原有逻辑即可：

.filter-btn.active {
  background-color: red;
  color: white;
}

.block-card {
  display: none;
}

.block-card.active {
  display: block;
}

修正后的JS #

删掉你原来写的所有原生JS绑定、单独给2/3/4号按钮写的重复绑定逻辑，用统一的事件处理即可，利用按钮id和区块id的命名对应关系匹配目标区块，不用给每个按钮单独写逻辑：

// 等DOM加载完成后绑定事件
$(function() {
  $('.filter-btn').on('click', function() {
    // 重置所有按钮的激活状态，给当前点击按钮加激活样式
    $('.filter-btn').removeClass('active');
    $(this).addClass('active');

    // 重置所有内容区块的显示状态，全部隐藏
    $('.block-card').removeClass('active');
    // 根据当前按钮的id拼接对应区块的选择器，显示匹配的区块
    const currentId = $(this).attr('id');
    $(`#block-${currentId}`).addClass('active');
  })
})

• 页面初始加载时，1号按钮和#block-1默认自带active类，会直接展示第一个区块，符合默认展示要求
• 点击任意按钮时，会先清空所有按钮、所有区块的激活状态，再给当前项和对应内容加激活态，不会出现旧区块无法隐藏的切换异常
• 后续如果需要新增切换项，只需要在HTML里加对应id的按钮和区块即可，不需要修改JS逻辑，可维护性更强

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