h4类按钮点击后数据分类未切换，求JS及前端代码排查

核心问题分析 #

你的分类切换失效主要是两个CSS问题导致的：

1. 缺少.hide类的样式定义：JS代码中给元素添加/移除hide类，但CSS里没有对应样式，元素不会隐藏，视觉上看不到切换效果。
2. filterable_works使用display: contents错误：这个属性会让容器本身消失，子元素直接挂载到上级容器，不仅导致margin-top、gap等布局属性失效，还可能干扰选择器的作用逻辑。

修复后的完整代码 #

HTML（无需修改）

<div class="filter_buttons2">
  <h4 class="active3" data-name="all2">Pokaż wszystkie</h4>
  <h4 data-name="music">Muzyka</h4>
  <h4 data-name="films">Filmy</h4>
  <h4 data-name="photography">Fotografia</h4>
  <h4 data-name="copywriting">Copywriting</h4>
</div>
<div class="filterable_works">
  <div class="work" data-name="music">
    <p>ddddd</p>
  </div>
  <div class="work" data-name="films">
    <p>gfjdfgjfg</p>
  </div>
  <div class="work" data-name="photography">
    <p>dsfsfgsghdf</p>
  </div>
  <div class="work" data-name="copywriting">
    <p>daaaasadd</p>
  </div>
</div>

CSS（修正关键问题）

.filter_buttons2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

h4 {
  padding: 10px 20px;
  font-size: 18px;
  background: #ffffff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 0 10px #000000;
  transition: background-color 0.2s;
}

h4.active3 {
  background: #670101;
  color: #ffffff;
}

.filterable_works {
  display: flex;
  margin-top: 25px;
  gap: 20px;
  flex-wrap: wrap;
}

.work {
  position: relative;
  max-width: 1300px;
  width: 100%;
  padding: 20px;
  margin: 0;
}

/* 添加hide类样式，实现元素隐藏 */
.hide {
  display: none;
}

JS（逻辑正确，无需修改）

const filterButtons2  = document.querySelectorAll(".filter_buttons2 h4");
const filterableWorks = document.querySelectorAll(".filterable_works .work");

const filterWorks = (e) => {
  document.querySelector(".active3").classList.remove("active3");
  e.target.classList.add("active3");

  filterableWorks.forEach((work) => {
    work.classList.add("hide");
    if (
      work.dataset.name === e.target.dataset.name ||
      e.target.dataset.name === "all2"
    ) {
      work.classList.remove("hide");
    }
  });
};

filterButtons2.forEach((h4) => h4.addEventListener("click", filterWorks));

额外优化提示 #

• 用CSS继承简化active3样式，避免重复代码；
• 给h4添加点击过渡动画，提升交互体验；
• 新手阶段可尝试事件委托（给.filter_buttons2绑定一次事件），减少事件监听数量，逻辑更简洁。

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