如何实现点击链接切换显示对应区块，隐藏其余区块？

嘿，看起来你已经走了大半路了，我来帮你把最后这步搞定！下面是完整的可运行实现方案，完美匹配你要的「单区块切换展示」需求：

1. HTML 结构 #

先把导航和内容区块做一一对应，每个链接的href直接指向对应区块的ID，逻辑更清晰：

<!-- 导航栏 -->
<nav>
  <a href="#about" class="nav-link">About Me</a>
  <a href="#contact" class="nav-link">Contact</a>
  <a href="#projects" class="nav-link">Projects</a>
</nav>

<!-- 内容区块 -->
<div id="about" class="content-block showing">
  <h2>About Me</h2>
  <p>这是关于我的个人介绍内容...</p>
</div>
<div id="contact" class="content-block">
  <h2>Contact</h2>
  <p>联系邮箱：xxx@xxx.com | 微信：xxxxxx</p>
</div>
<div id="projects" class="content-block">
  <h2>Projects</h2>
  <ul>
    <li>项目1：xxx管理系统</li>
    <li>项目2：xxx小程序</li>
  </ul>
</div>

2. CSS 样式 #

核心靠类控制显示/隐藏，顺便给导航加个选中高亮提升体验：

/* 默认隐藏所有内容区块 */
.content-block {
  display: none;
  padding: 20px;
  margin-top: 20px;
  border: 1px solid #eee;
  border-radius: 4px;
}

/* 显示带有showing类的区块 */
.content-block.showing {
  display: block;
}

/* 导航链接默认样式 */
.nav-link {
  margin-right: 15px;
  text-decoration: none;
  color: #333;
}

/* 选中的导航链接高亮 */
.nav-link.active {
  font-weight: bold;
  color: #2196F3;
  border-bottom: 2px solid #2196F3;
}

3. JavaScript 逻辑 #

处理点击事件，确保每次点击只显示目标区块，隐藏其他：

// 页面加载完成后执行逻辑
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有导航链接和内容区块
  const navLinks = document.querySelectorAll('.nav-link');
  const contentBlocks = document.querySelectorAll('.content-block');

  // 给每个导航链接绑定点击事件
  navLinks.forEach(link => {
    link.addEventListener('click', function(e) {
      // 阻止链接默认跳转行为（避免页面滚动到锚点）
      e.preventDefault();

      // 拿到目标区块的ID（去掉href里的#号）
      const targetId = this.getAttribute('href').slice(1);
      const targetBlock = document.getElementById(targetId);

      // 先隐藏所有内容区块
      contentBlocks.forEach(block => block.classList.remove('showing'));
      // 再显示目标区块
      targetBlock.classList.add('showing');

      // 同步更新导航高亮状态
      navLinks.forEach(navLink => navLink.classList.remove('active'));
      this.classList.add('active');
    });
  });
});

关键细节提醒 #

• 确保每个内容区块的ID和对应导航链接的href完全匹配，不然找不到目标区块。
• 一定要加e.preventDefault()，不然点击链接会触发页面锚点跳转，体验很差。
• 如果想修改初始显示的区块，只需要给对应区块加上showing类，同时给对应导航链接加上active类就行。

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