答案：通过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 选中并显示。
蓝色简洁商务公司网站模板
蓝色简洁商务公司网站模板使用多种jquery插件制作，首页多达8种风格，DIV+CSS布局，全套模板，包含首页、关于我们、团队、服务、工作流程、褒奖、联系我们、定价、常见问题、左侧导航、右侧导航、全宽、设计作品、图片展示、博客、按钮和图标、地图、内容滑块、视频、价格表、标签切换等网站模板页面。
30 查看详情
.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制作简易标签页切换效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1070661.html
微信扫一扫 
支付宝扫一扫 
