如何实现点击分类按钮展示对应文本、切换时自动隐藏旧内容，解决全内容同步显示异常

代码逻辑跑不通的核心是两个问题，完全匹配你遇到的异常：

• 交互逻辑错了：现在的点击事件里，是遍历所有内容块做独立的显示/隐藏切换，不是「先把所有内容清空，再单独展示当前按钮对应的块」。所以第一次点按钮时所有块默认是显示状态，循环跑完全变成隐藏；第二次点又从全隐藏变回全显示，永远是所有内容同显同隐，根本做不到单分类切换
• 元素没有做关联绑定：HTML里的按钮和对应的内容块没有加匹配标识，JS根本没法知道哪个按钮该对应哪一块的内容，就算逻辑改对了也找不到要展示的目标块

1. 调整HTML结构，给元素加匹配标识 #

给每个按钮加data-target自定义属性存对应分类的标识，给每个内容块加上对应的匹配类名，方便JS定位查找：

<div class='container'>
    <button class="button" data-target="fit">Fit guide</button>
    <button class="button" data-target="care">Care</button>
    <button class="button" data-target="material">Materials</button>
    
    <div class="single-entry entry-fit">
        <p>这里是Fit guide分类对应的文本内容</p>
    </div>

    <div class="single-entry entry-care">
        <p>这里是Care分类对应的文本内容</p>
    </div>

    <div class="single-entry entry-material">
        <p>这里是Materials分类对应的文本内容</p>
    </div>
</div>

2. 重写JS交互逻辑 #

交互流程改成符合需求的顺序：页面加载后所有内容块默认隐藏 → 点击按钮时先把所有内容块统一设为隐藏（清掉上一次的展示内容，避免多块同时出现） → 匹配当前按钮对应的分类标识，把对应的目标内容块单独设为显示：

const displayEntryButtons = document.querySelectorAll('.button');
const allEntries = document.querySelectorAll('.single-entry');

// 初始状态：所有内容块默认隐藏
allEntries.forEach(entry => {
  entry.style.display = 'none';
})

// 给每个按钮绑定点击事件
displayEntryButtons.forEach(button => {
  button.addEventListener('click', function() {
    // 先把所有已展示的内容全部隐藏
    allEntries.forEach(entry => {
      entry.style.display = 'none';
    })
    // 拿到当前点击按钮对应的分类标识
    const targetCategory = this.dataset.target;
    // 找到对应分类的内容块展示出来
    const targetContent = document.querySelector(`.entry-${targetCategory}`);
    if(targetContent) {
      targetContent.style.display = 'block';
    }
  })
})

之前写的循环判断，是给每个内容块做独立的状态翻转，没有任何“按分类匹配对应块”的判断逻辑。第一次点击时所有块默认是display: block的显示状态，循环跑一遍所有块都会被设为none隐藏；第二次点击时所有块是隐藏状态，循环跑完又全变回显示。全程都是所有块同步状态，自然会出现不管点哪个按钮所有内容都同时显示的问题。

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