通过 CSS :target 伪类配合锚点链接，可在不依赖 JavaScript 的前提下，实现单页中点击菜单项动态显示对应内容、隐藏其他内容的效果。
通过 css `:target` 伪类配合锚点链接，可在不依赖 javascript 的前提下，实现单页中点击菜单项动态显示对应内容、隐藏其他内容的效果。
在构建轻量级单页应用（SPA）或静态介绍页时，常需避免页面跳转或外部依赖，仅用 HTML 和 CSS 实现“标签式”内容切换——例如点击「About」显示关于信息，点击「Contact」则仅显示联系方式，其余内容自动隐藏。这完全可通过浏览器原生支持的 :target 伪类实现，无需任何脚本。
核心原理是：当 URL 中包含片段标识符（如 #about），且页面存在对应 id="about" 的元素时，该元素即成为目标元素（target element），CSS 中的 :target 选择器便会精准匹配它。
✅ 正确实现方式如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>单页内容切换</title>
<style>
/* 默认隐藏所有内容区块 */
.section { display: none; }
/* 当该元素成为 URL 片段目标时显示 */
.section:target { display: block; }
/* 可选：为提升体验，添加平滑过渡（注意：display 不支持过渡，可配合 opacity + visibility） */
.section {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.section:target {
opacity: 1;
visibility: visible;
display: block; /* display 仍需设为 block 以确保布局生效 */
}
/* 基础导航样式 */
nav { margin-bottom: 20px; }
nav a {
display: inline-block;
padding: 8px 16px;
margin-right: 8px;
text-decoration: none;
background: #007bff;
color: white;
border-radius: 4px;
}
nav a:hover { background: #0056b3; }
</style>
</head>
<body>
<nav>
<a href="#about">About</a>
<a href="#contact">Contact</a>
<a href="#home">Home</a>
</nav>
<!-- 默认不显示，仅当前 :target 匹配时可见 -->
<div id="home" class="section">
<h2>Welcome</h2>
<p>This is the homepage — shown by default if no hash is present.</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/skill3458" title="html-ppt-to-pdf"><img
src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill3458" title="html-ppt-to-pdf">html-ppt-to-pdf</a>
<p>将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p>
</div>
<a href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
</div>
<div id="about" class="section">
<h2>About Us</h2>
<p>We build clean, semantic, and accessible web interfaces using native web technologies.</p>
</div>
<div id="contact" class="section">
<h2>Contact</h2>
<p>Email: hello@example.com<br>Phone: +86 138 0013 8000</p>
</div>
</body>
</html>⚠️ 注意事项：
-
:target仅响应 URL 片段变化（即#xxx），不会响应:active或:hover等临时状态——因此原问题中误用:active是无效的。 - 初始加载时若 URL 无哈希（如
index.html），则无元素被:target匹配，所有.section均隐藏。如需默认显示某区块（如#home），可：- 在 HTML 中添加
<script>location.hash = '#home'</script>（但违反“纯 CSS”要求）； - 或更优雅地：将默认内容不套用
.section类，单独设置为display: block，其余按规则控制。
- 在 HTML 中添加
-
display属性本身不支持 CSS 过渡动画，若需淡入效果，请搭配opacity和visibility（如示例所示），并确保display始终设为block（或所需值）以维持布局流。
该方案兼容所有现代浏览器（Chrome、Firefox、Safari、Edge ≥12），零 JS、零依赖、语义清晰，是纯前端单页内容切换的经典实践。
