如何用JavaScript实现点击导航按钮切换页面区块显示隐藏？

别担心，我刚入门JS的时候也卡过这个点！其实核心思路就是给按钮和对应区块建立关联，点击按钮时先把所有区块隐藏，再显示目标区块就行。下面给你一套完整的可运行方案，每一步都给你讲清楚：

第一步：先搭好HTML结构 #

我们给导航按钮加共同的类（比如nav-btn），再用data-target属性绑定对应的区块ID；区块也用共同的类（比如page-section），方便统一控制：

<!-- 导航栏 -->
<nav>
  <button class="nav-btn active" data-target="#home">首页</button>
  <button class="nav-btn" data-target="#about">关于我们</button>
  <button class="nav-btn" data-target="#contact">联系我们</button>
</nav>

<!-- 页面区块 -->
<section id="home" class="page-section">这是首页内容</section>
<section id="about" class="page-section">这是关于我们的内容</section>
<section id="contact" class="page-section">这是联系我们的内容</section>

第二步：基础CSS样式 #

默认让所有区块隐藏，只显示默认激活的那个；给激活的导航按钮加个样式，让用户知道当前在哪个页面：

/* 所有区块默认隐藏 */
.page-section {
  display: none;
  padding: 20px;
  margin-top: 10px;
  border: 1px solid #eee;
}

/* 默认显示第一个区块 */
.page-section:first-of-type {
  display: block;
}

/* 导航按钮样式，激活状态加个底色 */
.nav-btn {
  padding: 8px 16px;
  margin-right: 5px;
  border: none;
  background: #f0f0f0;
  cursor: pointer;
}
.nav-btn.active {
  background: #4CAF50;
  color: white;
}

第三步：JS核心逻辑 #

这部分是关键，我们要做三件事：

1. 获取所有导航按钮
2. 给每个按钮绑定点击事件
3. 点击时切换区块显示/隐藏，更新按钮激活状态

// 1. 获取所有导航按钮
const navButtons = document.querySelectorAll('.nav-btn');
// 获取所有页面区块
const sections = document.querySelectorAll('.page-section');

// 2. 给每个按钮加点击事件
navButtons.forEach(button => {
  button.addEventListener('click', function() {
    // 3. 第一步：先把所有按钮的激活状态去掉
    navButtons.forEach(btn => btn.classList.remove('active'));
    // 给当前点击的按钮加上激活状态
    this.classList.add('active');

    // 第二步：获取当前按钮对应的目标区块ID
    const targetSectionId = this.dataset.target;
    // 找到目标区块
    const targetSection = document.querySelector(targetSectionId);

    // 第三步：把所有区块隐藏
    sections.forEach(section => section.style.display = 'none');
    // 显示目标区块
    targetSection.style.display = 'block';
  });
});

关键知识点解释 #

• data-target属性：这是HTML5的自定义数据属性，用来存按钮对应的区块ID，点击按钮时通过this.dataset.target就能拿到，不用硬写一堆判断条件，新手也能轻松关联按钮和区块。
• querySelectorAll：用来批量获取相同类名的元素，方便我们遍历操作所有按钮和区块。
• classList：用来添加/移除CSS类，这里用来控制按钮的激活状态，比直接改样式更灵活。

你把这三段代码复制到一个HTML文件里就能直接运行，点击导航按钮就能切换对应的区块啦！如果要加更多页面，只要照着现有结构加按钮和区块就行，不用改JS逻辑~

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