本文介绍一种无需 JavaScript 的纯前端方案，利用 CSS :target 伪类实现单页内菜单点击切换显示对应内容区块，所有逻辑仅依赖 HTML 锚点与 CSS 样式。
本文介绍一种无需 javascript 的纯前端方案，利用 css `:target` 伪类实现单页内菜单点击切换显示对应内容区块，所有逻辑仅依赖 html 锚点与 css 样式。
在构建轻量级单页应用（如作品集、简介页或文档概览）时，常需在不刷新页面的前提下动态切换主体内容。若受限于技术栈（如仅允许使用 HTML/CSS），传统 JavaScript 的 display 控制或 classList.toggle() 就不可用。此时，CSS 提供了一个简洁而强大的原生机制——:target 伪类。
:target 会在 URL 中包含片段标识符（即 #id）且该 ID 对应页面中某个元素时，匹配该元素。例如访问 page.html#about 时，<div id="about"> 即成为目标元素，<code>:target 规则将生效。
实现步骤如下：
-
为每个内容区块设置唯一
id并统一添加.section类； -
默认隐藏所有
.section元素； -
使用
.section:target显式设为display: block（或其他所需显示方式）； -
导航链接的
href指向对应id（如#about）。
完整示例代码：
立即学习“前端免费学习笔记（深入）”；
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>单页内容切换</title>
<style>
/* 默认隐藏所有内容区块 */
.section { display: none; }
/* 当该区块成为 URL 片段目标时显示 */
.section:target { display: block; }
/* 可选：增强用户体验，添加平滑过渡与基础样式 */
.section {
padding: 2rem;
margin: 1rem auto;
max-width: 600px;
background: #f9f9f9;
border-radius: 6px;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
animation: fadeIn 0.3s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
nav a {
margin-right: 1rem;
text-decoration: none;
color: #2563eb;
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>
<!-- 默认显示首页（可配合 :target 或初始可见性处理） -->
<div id="home" class="section" style="display: block;">
<h2>欢迎来到我的主页</h2>
<p>这是默认展示的首页内容。点击上方菜单切换视图。</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill4293" title="Doc To HTML"><img
src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill4293" title="Doc To HTML">Doc To HTML</a>
<p>使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p>
</div>
<a href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
</div>
<div id="about" class="section">
<h2>关于我</h2>
<p>一名专注前端体验与语义化开发的开发者，热爱简洁、可维护的解决方案。</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，兼容性好（IE9+ 支持
:target）； - 天然支持浏览器前进/后退、书签直链（如
index.html#skills）； - 语义清晰，符合 HTML 锚点本意，利于 SEO 与可访问性。
⚠️ 注意事项：
- 若需默认显示某区块（如首页），不能仅依赖
:target（因初始无 hash），建议对首个区块添加内联style="display: block"，或使用:target ~ .section:first-of-type等组合技巧（但兼容性略降）； - 所有
.section必须拥有唯一id，且导航链接href值必须严格匹配（区分大小写、不可含空格）； - 不支持“取消选中”或“关闭当前内容”操作（除非跳转到无效 hash 如
#，但会丢失历史状态），如需此功能，需引入少量 JS。
综上，:target 是 HTML/CSS 单页内容切换最优雅、最标准的原生解法——无需框架、不增加复杂度，却赋予静态页面交互生命力。
