如何用css制作简易标签页切换效果-css教程-PHP中文网

如何用css制作简易标签页切换效果

P粉602998670

发布： 2025-09-18 19:21:01

原创

1047人浏览过

答案：通过HTML锚点与CSS的:target伪类实现标签页切换。首先创建包含锚点链接和内容区的HTML结构，点击标签时URL更新hash值；利用CSS将所有内容区默认隐藏（display: none），仅当元素被:target选中时显示（display: block）；同时美化.tab-link样式以提升视觉交互效果，并可设置首个标签页默认可见。该方法无需JavaScript，适用于静态页面的简易标签切换场景。

如何用css制作简易标签页切换效果

要实现一个简易的标签页切换效果，可以通过 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制作简易标签页切换效果的详细内容，更多请关注php中文网其它相关文章！