答案：通过HTML锚点与CSS的:target伪类实现标签页切换。首先创建包含锚点链接和内容区的HTML结构，点击标签时URL更新hash值；利用CSS将所有内容区默认隐藏（display: none），仅当元素被:target选中时显示（display: block）；同时美化.tab-link样式以提升视觉交互效果，并可设置首个标签页默认可见。该方法无需JavaScript，适用于静态页面的简易标签切换场景。
要实现一个简易的标签页切换效果，可以通过 HTML + CSS 来完成，无需 JavaScript。核心思路是利用 :target 伪类选择器控制内容的显示与隐藏。
1. HTML 结构设计
每个标签对应一个锚点链接，点击时显示对应的内容区域。
<div class="tabs"> <a href="#tab1" class="tab-link">标签一</a> <a href="#tab2" class="tab-link">标签二</a> <a href="#tab3" class="tab-link">标签三</a> <div id="tab1" class="tab-content">这是第一个标签页的内容</div> <div id="tab2" class="tab-content">这是第二个标签页的内容</div> <div id="tab3" class="tab-content">这是第三个标签页的内容</div> </div>
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 的标签页切换。简单、高效，适合静态页面或轻量需求。
以上就是如何用css javascript java html 伪类选择器 JavaScript css html 选择器 display 伪类