本文介绍一种轻量级 JavaScript 方案：在页面加载完成时自动显示 #overview 区域；当用户点击任意导航链接时，立即隐藏该区域，从而实现“默认展示、切换即收”的交互逻辑。

本文介绍一种轻量级 javascript 方案：在页面加载完成时自动显示 `#overview` 区域；当用户点击任意导航链接时，立即隐藏该区域，从而实现“默认展示、切换即收”的交互逻辑。

要实现“页面加载时显示概览（overview）区域，点击其他导航项时自动隐藏”，关键在于两个时机的控制：页面加载完成时的初始显示，以及用户触发导航行为时的动态隐藏。整个方案无需依赖框架，仅用原生 JavaScript 即可高效完成。

✅ 基础 HTML 结构

首先确保 #overview 元素默认可见（避免内联 style="display: none" 导致首屏不可见），其余内容区域可按需组织：

<div id="overview">
  <h2>欢迎查看概览</h2>
  <p>这是网站的默认展示区域。</p>
</div>

<header><nav><ul>
<li><a href="#section1" onclick="hideSection('overview')">功能介绍</a></li>
      <li><a href="#section2" onclick="hideSection('overview')">使用指南</a></li>
      <li><a href="#section3" onclick="hideSection('overview')">联系我们</a></li>
    </ul></nav></header><!-- 其他 section 可在此后添加，例如 --><section id="section1">...</section><section id="section2">...</section><section id="section3">...</section>

✅ JavaScript 控制逻辑

将以下脚本置于 底部或使用 <code>defer 属性引入，确保 DOM 已就绪：

// 页面加载完成后显示 overview
window.addEventListener('load', () => {
  const overview = document.getElementById('overview');
  if (overview) overview.style.display = 'block';
});

// 通用隐藏函数
function hideSection(sectionId) {
  const el = document.getElementById(sectionId);
  if (el) el.style.display = 'none';
}

? 注意：推荐使用 window.addEventListener('load', ...) 替代过时的 window.onload = ...，更符合现代实践，且支持多监听器叠加。

✅ 进阶优化建议（可选）

• 若需支持「返回概览」功能，可增加一个「首页」按钮并绑定 showSection('overview')；
• 为提升体验，可配合 CSS 过渡实现淡入/淡出效果：

  #overview {
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  #overview.show {
    opacity: 1;
  }

  对应 JS 中改为 overview.classList.add('show') 和 overview.classList.remove('show')；

• 避免内联 onclick，更推荐通过事件委托统一管理导航行为（尤其适用于动态生成菜单的场景）。

该方案简洁、可靠、无外部依赖，适用于静态站点或轻量 SPA 场景，兼顾可维护性与可读性。