仅使用 HTML 锚点与 CSS :target 伪类，即可在单个 HTML 文件中实现点击菜单项显示对应隐藏内容、其余内容自动隐藏的交互效果，无需任何 JavaScript。
仅使用 html 锚点与 css `:target` 伪类，即可在单个 html 文件中实现点击菜单项显示对应隐藏内容、其余内容自动隐藏的交互效果，无需任何 javascript。
在构建轻量级单页展示页（如个人简介、作品集首页或产品功能概览）时，常需避免页面跳转或滚动浏览，而是通过顶部导航栏一键切换不同模块内容——所有内容共存于同一 HTML 文件中，但仅当前选中模块可见。这种效果完全可通过原生 HTML + CSS 实现，核心在于利用 :target 伪类：它会在 URL 哈希（#xxx）匹配某个元素 id 时，精准选中该元素。
实现步骤如下：
结构化导航与内容区块
使用<nav></nav>定义菜单，每个@#@#@#@#@#@#@#@#@#@0@#@#@#@#@#@#@#@#@#@1@#@#@#@#@#@#@#@#@#@2@#@#@#@#@#@#@#@#@#@3<div id="home" class="section"> <h2>欢迎来到我的主页</h2> <p>这是默认展示区域。点击上方菜单切换内容。</p> </div> <div id="about" class="section"> <h2>关于我</h2> <p>一名专注前端体验的开发者，热爱简洁、可访问的 Web 解决方案。</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5117" title="HTML Extract"><img src="https://img.php.cn/upload/skill/000/000/081/179033952939354.jpg" alt="HTML Extract" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5117" title="HTML Extract" class="overflowclass">HTML Extract</a> <p class="overflowclass">使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...</p> </div> <a rel="nofollow" href="/xiazai/skill5117" title="HTML Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> </div> <div id="skills" class="section"> <h2>技能清单</h2> <ul> <li>HTML5 / CSS3</li> <li>响应式设计</li> <li>无障碍（a11y）实践</li> </ul> </div> <div id="contact" class="section"> <h2>联系我</h2> <p>邮箱：@#@#@#@#@#@#@#@#@#@4</p> </div> <p> ``` </p> <p>✅ <strong>优势与注意事项</strong>： </p> <ul> <li>✅ 纯静态、零 JS、兼容性好（IE8+ 支持 <code>:target）；- ✅ 浏览器地址栏实时更新哈希（如
page.htmlhttps://www.php.cn/link/58f5494e7f958bdb46d4f26821bf1106），支持前进/后退与书签； - ⚠️ 注意：
:target一次仅匹配一个元素，天然满足“单页单显”需求； - ⚠️ 若需默认显示某区块（如首页），可在页面加载时将对应
id设为初始哈希（例如在），或直接在 URL 中附加https://www.php.cn/link/53a9f8cd4872ab6ef7e09a25b1bdb1e8； - ⚠️ 所有
.section必须有唯一id，且<a href></a>值需严格一致（大小写敏感、无空格）。
此方案简洁、可靠、语义清晰，是纯前端单页内容路由的经典实践。
.section {
display: none;
}
.section:target {
display: block;
}
<meta charset="UTF-8"><title>单页内容切换</title><style>
.section { display: none; padding: 20px; border: 1px solid #eee; }
.section:target { display: block; background: #f9f9f9; }
nav { margin-bottom: 20px; }
nav a { margin-right: 15px; text-decoration: none; color: #007bff; }
</style>Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
