如何实现点击分类按钮切换div内对应赛事内容的前端效果

全程用原生JS实现，不需要引入额外框架，直接改现有代码即可。

1. 调整HTML结构 #

先做3处基础改动：

• 给所有导航选项加上data-target自定义属性，标记点击后要展示的内容id，默认展示的全国联赛选项加上active类
• 补全MHA杯、友谊赛对应的内容容器，和现有全国联赛容器保持同层级
• 非默认展示的两个内容容器初始加上hidden类，保证首次加载只显示全国联赛内容

导航部分修改后代码：

<ul>
  <div class="category">
    <li class="active" data-target="national-league">National League</li>
    <li data-target="mha-cup">MHA Cup</li>
    <li data-target="friendlies">Friendlies</li>
  </div>
  <div class="show-all">
    <li data-target="all">Show All</li>
  </div>
</ul>

内容区部分参考结构（只需要把对应分类的赛事条目放进对应容器即可）：

<!-- 全国联赛  默认显示 -->
<div class="tables" id="national-league">
  <!-- 全国联赛赛事条目放这里 -->
</div>
<!-- MHA杯 默认隐藏 -->
<div class="tables hidden" id="mha-cup">
  <!-- MHA杯赛事条目放这里 -->
</div>
<!-- 友谊赛 默认隐藏 -->
<div class="tables hidden" id="friendlies">
  <!-- 友谊赛赛事条目放这里 -->
</div>

2. 补充/调整CSS样式 #

首先把原有.category li选择器里的border-bottom: 2.5px solid #01296f;删掉，下划线只给选中的导航项显示，再补以下样式：

/* 导航项增加点击手型提示 */
.category li,
.show-all li {
  cursor: pointer;
  border-bottom: 2.5px solid transparent;
}
/* 导航选中态样式 */
.category li.active,
.show-all li.active {
  border-bottom: 2.5px solid #01296f;
}
/* 隐藏未选中的内容块 */
.tables.hidden {
  display: none;
}

之前写的#friendlies、#mha-cup的测试边框样式可以按需删除，不影响功能。

3. 写入JS交互逻辑 #

把以下代码放在</body>标签前即可，逻辑完全解耦，后续加新分类不用改JS：

// 获取所有导航选项和内容块
const navItems = document.querySelectorAll('.category li, .show-all li');
const contentBlocks = document.querySelectorAll('.tables');

// 绑定点击事件
navItems.forEach(item => {
  item.addEventListener('click', () => {
    // 重置所有导航的选中态
    navItems.forEach(nav => nav.classList.remove('active'));
    item.classList.add('active');

    const targetCategory = item.dataset.target;
    // 点击Show All时展示全部内容
    if (targetCategory === 'all') {
      contentBlocks.forEach(block => block.classList.remove('hidden'));
      return;
    }
    // 单分类切换：先隐藏所有内容，再显示对应分类
    contentBlocks.forEach(block => {
      block.id === targetCategory ? block.classList.remove('hidden') : block.classList.add('hidden');
    })
  })
})

逻辑说明 #

• 首次加载默认给National League加active态，只显示对应内容，符合需求
• 点击任意导航项先清空所有选中状态，再给当前项加选中样式，避免多个选项同时高亮
• 点击Show All时移除所有内容块的hidden类，直接展示全部分类赛事
• 后续新增分类只需要加对应id的内容容器、加带对应data-target的导航项即可，不需要修改JS逻辑

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