如何用 JavaScript 实现点击菜单项切换显示对应内容区块

在网页交互开发中，点击菜单项切换对应内容区块是非常常见的需求，比如标签页切换、导航对应内容展示等场景都需要用到这个功能，实现的核心是通过JavaScript操作DOM元素控制显示状态。

基础结构搭建

首先需要准备对应的HTML结构，包含菜单项列表和对应的内容区块，给每个菜单项和内容区块添加对应的标识方便后续匹配。

<div class="menu-container">
  <ul class="menu-list">
    <li class="menu-item active" data-target="content1">菜单项一</li>
    <li class="menu-item" data-target="content2">菜单项二</li>
    <li class="menu-item" data-target="content3">菜单项三</li>
  </ul>
</div>
<div class="content-container">
  <div class="content-item active" id="content1">这是第一个内容区块的内容</div>
  <li class="content-item" id="content2">这是第二个内容区块的内容</li>
  <div class="content-item" id="content3">这是第三个内容区块的内容</div>
</div>

样式设置

通过CSS设置默认的内容区块隐藏，只有带有active类的内容区块显示，同时给激活的菜单项添加高亮样式，方便用户区分当前选中的菜单。

.menu-list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}
.menu-item {
  padding: 10px 20px;
  cursor: pointer;
  border: 1px solid #ccc;
  margin-right: 5px;
}
.menu-item.active {
  background-color: #007bff;
  color: #fff;
  border-color: #007bff;
}
.content-item {
  display: none;
  padding: 20px;
  border: 1px solid #eee;
  margin-top: 10px;
}
.content-item.active {
  display: block;
}

JavaScript逻辑实现

核心逻辑是给所有菜单项绑定点击事件，点击时先移除所有菜单项和内容区块的active类，再给当前点击的菜单项添加active类，同时找到对应标识的内容区块添加active类实现显示。

// 获取所有菜单项元素
const menuItems = document.querySelectorAll('.menu-item');
// 获取所有内容区块元素
const contentItems = document.querySelectorAll('.content-item');

// 遍历菜单项绑定点击事件
menuItems.forEach(item => {
  item.addEventListener('click', function() {
    // 获取当前点击菜单项对应的目标内容区块标识
    const targetId = this.getAttribute('data-target');
    
    // 移除所有菜单项的active类
    menuItems.forEach(menu => {
      menu.classList.remove('active');
    });
    // 给当前点击的菜单项添加active类
    this.classList.add('active');
    
    // 移除所有内容区块的active类
    contentItems.forEach(content => {
      content.classList.remove('active');
    });
    // 找到对应标识的内容区块添加active类
    const targetContent = document.getElementById(targetId);
    if (targetContent) {
      targetContent.classList.add('active');
    }
  });
});

功能优化建议

如果需要支持默认显示第一个菜单对应的内容，可以在HTML中提前给第一个菜单项和第一个内容区块添加active类，上述代码已经兼容了这个场景。

如果菜单项数量动态变化，可以在新增菜单项后重新绑定点击事件，或者使用事件委托的方式给菜单容器绑定点击事件，提升性能。

// 事件委托方式实现，适合动态新增菜单项的场景
const menuContainer = document.querySelector('.menu-list');
menuContainer.addEventListener('click', function(e) {
  // 判断点击的是否是菜单项
  if (e.target.classList.contains('menu-item')) {
    const targetId = e.target.getAttribute('data-target');
    // 移除所有菜单项active类
    menuItems.forEach(menu => {
      menu.classList.remove('active');
    });
    // 给当前点击项添加active类
    e.target.classList.add('active');
    // 切换内容区块显示
    contentItems.forEach(content => {
      content.classList.remove('active');
    });
    const targetContent = document.getElementById(targetId);
    if (targetContent) {
      targetContent.classList.add('active');
    }
  }
});

JavaScriptclick_eventcontent_toggleDOM操作修改时间：2026-07-07 02:39:22