切换Tab标签组时点击后内容不显示，如何正确实现切换避免内容消失

问题根因 #

1. 内容选择器错误：你用document.querySelectorAll('.tabbed-content div')选中了.tabbed-content下的所有div，包括每个release块内部的.page-hero子div，这些子div没有对应匹配的id，切换时全部被设置为display: none，所以即使父级release容器显示，内部内容也全部隐藏，看上去就是内容消失了。
2. 事件冒泡冲突：点击li标签时，点击事件会冒泡到外层的.dropdown-select容器，触发容器的开合切换逻辑，会导致移动端点击标签后菜单直接被收起，影响操作。
3. 重复绑定事件：你给同一份li元素绑定了两次独立的点击事件，分别处理激活态切换和内容切换，逻辑分散也容易出问题。

修复方案 #

1. 修改内容选择器 #

将内容切换部分的选择器改为只选中直接的内容容器：

// 原错误代码
// const results = document.querySelectorAll('.tabbed-content div')
// 修改后
const results = document.querySelectorAll('.tabbed-content .release')

2. 阻止事件冒泡 #

在li的点击事件中添加e.stopPropagation()，避免点击标签时触发外层下拉框的开合逻辑。

3. 合并事件逻辑（可选优化） #

可以把激活态切换和内容切换的逻辑合并到同一个事件监听里，减少重复绑定。

完整修复后的JS代码 #

let dropdown = document.querySelector('.dropdown-select');
let dropdownItem = document.querySelectorAll('.dropdown-select .menu li');
const results = document.querySelectorAll('.tabbed-content .release')

// 下拉框开合逻辑
dropdown.addEventListener('click', (e) => {
  if (dropdown.classList.contains('closed')) {
    dropdown.classList.remove('closed');
    dropdown.classList.add('open');
  } else {
    dropdown.classList.add('closed');
    dropdown.classList.remove('open');
  }
});

// 标签点击逻辑，合并激活态和内容切换
dropdownItem.forEach(item => {
  item.addEventListener('click', (e) => {
    // 阻止事件冒泡到外层下拉容器
    e.stopPropagation()
    // 切换激活态
    document.querySelector('.menu li.active')?.classList.remove('active');
    item.classList.add('active');
    // 切换对应内容显示
    results.forEach(content => {
      content.style.display = content.id === item.dataset.target ? "block" : "none"
    })
  })
})

修改后即可正常切换标签内容，不会出现内容消失的问题。

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