本文介绍一种轻量级 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 控制逻辑
将以下脚本置于 底部或使用 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 场景，兼顾可维护性与可读性。
