JS实现导航栏点击显隐 乱序点击元素堆叠问题修复

原有切换逻辑只按导航固定顺序隐藏相邻的上一个内容块，没有处理其他非相邻的内容块状态，乱序点击时，未被逻辑覆盖到的内容块会保持显示状态，最终出现多块堆叠的问题。

每次触发导航切换时，先把所有内容区块统一隐藏，再单独展示当前导航对应的目标区块，完全不用关心上一个显示的是哪个区块，从根源避免状态遗漏。

• 把原来4个独立的切换函数合并为1个通用函数，减少重复代码
• 保留页面初始化默认展示首页的逻辑
• 原有CSS样式不需要改动

修复后的Javascript代码 #

// 维护所有内容区块的id，后续新增导航项直接往数组加id即可
const allSections = ["home", "skills", "projects", "languages"];

function showSection(targetId) {
  // 第一步：隐藏全部内容区块
  allSections.forEach(sectionId => {
    document.getElementById(sectionId).style.display = "none";
  });
  // 第二步：仅展示当前选中的区块
  document.getElementById(targetId).style.display = "block";
}

// 页面加载完成后默认展示首页
showSection("home");

修改后的HTML导航代码 #

把原来每个导航项绑定的独立函数，改成调用通用函数传入对应区块id即可，内容区块部分的代码不需要改动：

<ul id="top-menu-bar">
  <li><a href="#" onclick="showSection('home')">Home</a></li>
  <li><a href="#" onclick="showSection('skills')">Skills</a></li>
  <li><a href="#" onclick="showSection('projects')">Projects</a></li>
  <li><a href="#" onclick="showSection('languages')">Languages</a></li>
</ul>
<p id="home">I'm the home page.</p>
<p id="skills">I'm the skills page.</p>
<p id="projects">I'm the projects page.</p>
<p id="languages">I'm the languages page.</p>

保留可用的CSS代码 #

原有初始隐藏所有内容块的逻辑完全可用，不需要调整：

#home, #skills, #projects, #languages {
  display: none;
}

修复后无论按什么顺序点击导航项，都只会显示当前选中的内容区块，不会再出现多块堆叠的问题，后续新增导航和内容块的维护成本也更低。

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