本文介绍一种无需 JavaScript 的纯前端方案：利用 CSS :target 伪类配合页面锚点，实现单 HTML 文件内点击菜单项动态显示对应内容区块、其余内容自动隐藏的效果。简洁、语义清晰且完全兼容现代浏览器。
本文介绍一种无需 javascript 的纯前端方案：利用 css `:target` 伪类配合页面锚点，实现单 html 文件内点击菜单项动态显示对应内容区块、其余内容自动隐藏的效果。简洁、语义清晰且完全兼容现代浏览器。
在构建轻量级单页应用（如个人简介页、产品介绍页或文档概览页）时，常需避免多页面跳转，同时又不引入 JavaScript——此时 CSS 的 :target 伪类就是理想“技巧”。:target 会在 URL 哈希（#xxx）与页面中对应 id 元素匹配时生效，借此可精准控制目标区块的显隐状态。
核心原理与代码结构如下：
-
统一隐藏所有内容区：为所有待切换的内容容器设置
.section { display: none; }； -
激活当前目标区块：通过
.section:target { display: block; }让 URL 中哈希指向的元素显示； -
菜单使用标准锚链接：
<a href="#about"></a>点击后触发浏览器跳转至#about，同时激活#about元素的:target状态。
完整示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>单页内容切换</title>
<style>
.section {
display: none;
padding: 20px;
margin-top: 16px;
border-left: 4px solid #4285f4;
background-color: #f8f9fa;
}
.section:target {
display: block;
}
nav a {
margin-right: 12px;
text-decoration: none;
color: #4285f4;
font-weight: 500;
}
nav a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<nav>
<a href="#home">首页</a>
<a href="#about">关于我</a>
<a href="#skills">技能</a>
<a href="#contact">联系</a>
</nav>
<div id="home" class="section">
<h2>欢迎来到我的主页</h2>
<p>这是默认展示区域（可通过初始 URL 设置，如 <code>index.html#home</code>）。</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill4156" title="Pptx To Html"><img
src="https://img.php.cn/upload/skill/000/000/081/178995432594388.jpg" alt="Pptx To Html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill4156" title="Pptx To Html">Pptx To Html</a>
<p>使用 MinerU 将 PowerPoint (.pptx) 演示文稿转换为 HTML，保留幻灯片内容与结构，生成可直接在网页使用的 HTML格式。</p>
</div>
<a href="/xiazai/skill4156" title="Pptx To Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
</div>
<div id="about" class="section">
<h2>关于我</h2>
<p>前端开发者，热爱简洁、可维护的 Web 解决方案。</p>
</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>邮箱：<code>hello@example.com</code></p>
</div>
</body>
</html>✅ 优势说明：
- 零 JS，无外部依赖，加载极快；
- 天然支持浏览器前进/后退、书签直连（如
page.html#skills）； - 语义化良好，对屏幕阅读器友好（锚点导航本身具备可访问性基础）。
⚠️ 注意事项：
- 所有内容区块必须拥有唯一
id，且<a href="#xxx"></a>中的xxx必须严格匹配； - 初始状态下若希望默认显示某区块，可在 URL 中直接附加哈希（如打开
index.html#about），或通过添加:target的兜底规则（如#about:target, #about:not(:target) { display: block; }）实现默认展开——但更推荐保持逻辑纯粹，由 URL 控制初始状态； - 若需平滑过渡效果，可结合
opacity和transition（注意display不可动画，需改用visibility+opacity或max-height配合overflow: hidden）。
该方案是 HTML/CSS 能力边界内优雅解决单页内容切换的经典范式，适合快速原型、静态站点及对 JS 有严格限制的场景。
