如何用纯 CSS 实现标签页（Tabs）并动态显示对应内容-html教程-PHP中文网

如何用纯 CSS 实现标签页（Tabs）并动态显示对应内容

本文详解如何基于你现有的 HTML 结构，通过纯 CSS（利用 :has() 选择器）为每个标签绑定专属内容区域，解决“文字不显示”的核心问题，并提供兼容性备选方案。

本文详解如何基于你现有的 html 结构，通过纯 css（利用 :has() 选择器）为每个标签绑定专属内容区域，解决“文字不显示”的核心问题，并提供兼容性备选方案。

要让每个标签（Tab）正确显示其对应的内容，关键在于建立「选中状态」与「内容可见性」之间的映射关系。你当前的代码已具备完整的标签导航结构（6 个 <input type="radio"> + <label></label>），但缺少内容容器及其显隐控制逻辑——这正是内容“不显示”的根本原因。

✅ 正确结构：添加内容区并关联标签 ID

在 .popup 容器内、.tabs 之后，必须添加独立的 .content 元素，每个元素通过 data-tab 属性与对应 radio 的 id 精确匹配：

<div class="popup">
  <div class="tabs">
    <!-- 你的 radio + label 结构保持不变 -->
    <input type="radio" id="tab1" name="tab" checked><label for="tab1">FIRST TAB</label>
    <!-- ... 其他5个tab -->
    <div class="marker">...</div>
  </div>

  <!-- ✅ 新增：每个 content 对应一个 tab -->
  <div class="content" data-tab="tab1">这是第一个标签页的内容！</div>
  <div class="content" data-tab="tab2">这里是第二个标签页的内容。</div>
  <div class="content" data-tab="tab3">第三个标签页的内容在此展示。</div>
  <div class="content" data-tab="tab4">第四个标签页的文本内容。</div>
  <div class="content" data-tab="tab5">第五个标签页的详细信息。</div>
  <div class="content" data-tab="tab6">第六个标签页的最终内容。</div>
</div>

✅ CSS 控制：用 `:has()` 动态切换内容显示

在 .popup 样式中加入以下 CSS（注意：需写在 .popup 规则内部或作为独立规则，确保层级有效）：

.popup .content {
  display: none; /* 默认全部隐藏 */
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}

/* 当 tab1 被选中时，显示 data-tab="tab1" 的内容 */
.popup:has(#tab1:checked) .content[data-tab="tab1"],
.popup:has(#tab2:checked) .content[data-tab="tab2"],
.popup:has(#tab3:checked) .content[data-tab="tab3"],
.popup:has(#tab4:checked) .content[data-tab="tab4"],
.popup:has(#tab5:checked) .content[data-tab="tab5"],
.popup:has(#tab6:checked) .content[data-tab="tab6"] {
  display: block;
}

? 原理说明：:has(#tab1:checked) 是父容器 .popup 的状态检测器，它能感知子元素中哪个 radio 处于 checked 状态；再结合 [data-tab="tab1"] 精准定位目标内容块，实现「所见即所选」。

⚠️ 注意事项与兼容性提醒

浏览器支持：:has() 在 Chrome 105+、Edge 105+、Safari 15.4+ 中原生支持（caniuse.com/css-has）。若需支持旧版浏览器（如 IE、旧版 Firefox），必须改用 JavaScript 方案：

CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载
```
document.querySelectorAll('input[name="tab"]').forEach(radio => {
  radio.addEventListener('change', () => {
    document.querySelectorAll('.content').forEach(el => el.style.display = 'none');
    const target = document.querySelector(`.content[data-tab="${radio.id}"]`);
    if (target) target.style.display = 'block';
  });
});
```
结构严谨性：确保所有 <input> 的 name 属性值一致（如 name="tab"），且每个 id 与对应 data-tab 值完全相同（大小写、拼写均需一致）。
样式优化建议：为 .content 添加 flex: 1 可使其自动填充剩余空间；配合 overflow-y: auto 支持长内容滚动，避免溢出。