基于原生JavaScript实现菜单点击切换内容块显隐（无jQuery）

没问题！这是一个非常基础且实用的原生JS选项卡实现思路，我会一步步拆解给你看，新手也能快速上手：

第一步：先搭好HTML结构 #

咱们先把菜单和对应的内容块写好，关键是给菜单项加data-target属性，和内容块的id对应上，这样点击时能快速找到对应的内容：

<!-- 菜单容器 -->
<ul class="tab-menu">
  <li class="tab-item active" data-target="tech-content">Technology</li>
  <li class="tab-item" data-target="sports-content">Sports</li>
  <li class="tab-item" data-target="food-content">Food</li>
</ul>

<!-- 内容容器 -->
<div class="tab-content-container">
  <div id="tech-content" class="tab-content active">
    <h3>Technology Content</h3>
    <p>这里是科技相关的内容哦~</p>
  </div>
  <div id="sports-content" class="tab-content">
    <h3>Sports Content</h3>
    <p>这里是体育相关的内容哦~</p>
  </div>
  <div id="food-content" class="tab-content">
    <h3>Food Content</h3>
    <p>这里是美食相关的内容哦~</p>
  </div>
</div>

第二步：加基础CSS样式 #

先把默认的内容块隐藏，只有带active类的才显示，同时给选中的菜单项加个样式，让用户知道当前选中的是哪个：

/* 菜单样式，可根据自己需求调整 */
.tab-menu {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 10px;
  border-bottom: 1px solid #eee;
}

.tab-item {
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 4px 4px 0 0;
}

.tab-item.active {
  background-color: #007bff;
  color: white;
}

/* 内容块样式 */
.tab-content-container {
  margin-top: 10px;
}

.tab-content {
  display: none; /* 默认隐藏所有内容块 */
  padding: 16px;
  border: 1px solid #eee;
  border-top: none;
}

.tab-content.active {
  display: block; /* 显示激活的内容块 */
}

第三步：写原生JavaScript逻辑 #

核心思路就是：点击菜单项时，先清空所有菜单和内容的active状态，再给当前点击的菜单和对应内容加上active状态：

// 获取所有菜单项和内容块
const tabItems = document.querySelectorAll('.tab-item');
const tabContents = document.querySelectorAll('.tab-content');

// 给每个菜单项绑定点击事件
tabItems.forEach(item => {
  item.addEventListener('click', () => {
    // 1. 移除所有菜单项的active类
    tabItems.forEach(li => li.classList.remove('active'));
    // 2. 移除所有内容块的active类（隐藏所有内容）
    tabContents.forEach(content => content.classList.remove('active'));
    
    // 3. 给当前点击的菜单项加active类
    item.classList.add('active');
    // 4. 找到对应的内容块并加active类（显示内容）
    const targetId = item.getAttribute('data-target');
    document.getElementById(targetId).classList.add('active');
  });
});

额外小提示 #

• 如果你想默认显示第一个内容块，只需要在HTML里给第一个菜单项和内容块加上active类就行，就像我上面写的那样。
• 用data-target属性比硬编码id更灵活，以后加新的菜单和内容块，只需要对应好id和data-target，不用改JS代码~

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