答案：通过HTML锚点与CSS的:target伪类实现标签页切换。首先创建包含锚点链接和内容区的HTML结构，点击标签时URL更新hash值；利用CSS将所有内容区默认隐藏（display: none），仅当元素被:target选中时显示（display: block）；同时美化.tab-link样式以提升视觉交互效果，并可设置首个标签页默认可见。该方法无需JavaScript，适用于静态页面的简易标签切换场景。
要实现一个简易的标签页切换效果，可以通过 HTML + CSS 来完成，无需 JavaScript。核心思路是利用 :target 伪类选择器控制内容的显示与隐藏。
1. HTML 结构设计
每个标签对应一个锚点链接，点击时显示对应的内容区域。
2. 基础样式设置
为标签和内容区域添加基本样式，隐藏所有内容面板。
.tab-content {
display: none;
padding: 20px;
border: 1px solid #ddd;
margin-top: -1px;
}
使用 display: none 隐藏所有 .tab-content 元素。
立即学习“前端免费学习笔记（深入）”；
3. 利用 :target 显示当前内容
当 URL 中的 hash 匹配某个元素 ID 时，该元素进入“目标状态”，可用 :target 选中并显示。
.tab-content:target {
display: block;
}
点击“标签一”后，URL 变为 #tab1，id="tab1" 的元素被显示。
4. 标签样式美化
让标签看起来更像可点击的选项卡。
.tab-link {
display: inline-block;
padding: 10px 15px;
background: #f0f0f0;
text-decoration: none;
color: #333;
border: 1px solid #ddd;
margin-right: -1px;
}
.tab-link:hover {
background: #e0e0e0;
}
可以进一步设置默认显示某一页：给第一个内容块添加 id 和 :target 之外的默认显示方式，比如：
#tab1:target,
#tab1:not(:target) ~ #tab1 {
display: block;
}
或者直接在 CSS 中让第一个内容默认显示：
#tab1 {
display: block;
}
基本上就这些。通过锚点跳转触发 :target，就能实现纯 CSS 的标签页切换。简单、高效，适合静态页面或轻量需求。
