页面初始化时自动显示“overview”区域，当用户点击任意导航链接切换到其他内容时，自动隐藏该概览区，是一种常见的单页应用（spa）式交互模式。本文提供简洁可靠的原生 javascript 实现方案。
页面初始化时自动显示“overview”区域，当用户点击任意导航链接切换到其他内容时，自动隐藏该概览区，是一种常见的单页应用（spa）式交互模式。本文提供简洁可靠的原生 javascript 实现方案。
要实现「页面加载时自动显示概览区，点击其他导航项时自动隐藏」的效果，关键在于两点：初始状态控制与交互触发逻辑。以下是一个轻量、兼容性好、无需框架的完整实现方案。
✅ HTML 结构（精简清晰）
<header><nav><ul>
<li><a href="#example1" onclick="hideOverview()">示例一</a></li>
<li><a href="#example2" onclick="hideOverview()">示例二</a></li>
<li><a href="#example3" onclick="hideOverview()">示例三</a></li>
</ul></nav></header><!-- 概览区：默认隐藏，由 JS 控制显隐 --><div id="overview">
<h2>欢迎概览</h2>
<p>这是页面默认展示的内容，仅在无其他内容激活时可见。</p>
</div>
<!-- 其他内容区（可按需添加） -->
<section id="example1" style="display: none;"><h2>示例一内容</h2>
<p>点击上方链接后，此处显示，同时概览区自动隐藏。</p>
</section>
✅ JavaScript 行为逻辑（稳定可靠）
// 页面完全加载后，显示概览区
window.addEventListener('load', () => {
const overview = document.getElementById('overview');
if (overview) overview.style.display = 'block';
});
// 隐藏概览区的复用函数
function hideOverview() {
const overview = document.getElementById('overview');
if (overview) overview.style.display = 'none';
}
? 为什么用
window.addEventListener('load')而非window.onload？
前者支持多次绑定，更符合模块化开发习惯；后者会被后续赋值覆盖，易导致逻辑丢失。
⚠️ 注意事项与优化建议
-
避免内联样式污染：推荐将
display: block/none交由 CSS 类控制（如.hidden { display: none; }），便于维护和主题切换：#overview { display: block; } #overview.hidden { display: none; }对应 JS 改为
overview.classList.add('hidden')/remove('hidden')。 - 增强健壮性：添加元素存在性判断（如上代码所示），防止因 DOM 未就绪或 ID 错误导致脚本中断。
-
扩展性考虑：若未来需支持「返回概览」功能，可添加一个「首页」链接并调用
showOverview()，统一管理显隐状态。 -
无障碍友好：概览区建议添加
aria-live="polite"或tabindex="-1"，确保屏幕阅读器能感知动态显隐变化。
该方案零依赖、语义清晰、易于调试，适用于静态站点、文档页或轻量级单页应用，兼顾可访问性与长期可维护性。
