如何仅使用 CSS 制作标签？ [复制]

Posted 2023-03-07

【中文标题】如何仅使用 CSS 制作标签？ [复制]

【英文标题】：How can I make tabs with only CSS? [duplicate]

【发布时间】：2014-11-14 14:43:17

【问题描述】：

我正在寻找像jQuery tabs 这样的标签系统，用户可以在其中切换不同的面板以查看不同的内容：

但是，我需要在不使用 javascript 的情况下完成此操作，以便未启用 javascript 的用户可以轻松使用该站点。此外，我想避免导航到不同的静态html 页面，每个页面都有与“选项卡”相对应的不同样式。有什么好的方法来解决这个问题？

【问题讨论】：

@T.J.Crowder 重复项呢？虽然答案不是那么详细/具体，但快速搜索会发现：***.com/a/4937615/1253479（从 2011 年开始）。如果问题是“unique”，我可以理解来自 OP 的 Q/A，但我看不到这篇特定帖子的好处。

@royhowie：奇怪，那个曾经工作过。

【参考方案1】：

实现纯 CSS 选项卡的一种简单方法是使用单选按钮！

关键是设置附加到相应按钮的labels 样式。单选按钮本身是隐藏的，有一点绝对定位，远离屏幕。

基本的html结构是：

div#holder
    input[type="radio"]
    div.content-holder
        label
        div.tab-content (all your tab content goes here)
    input[type="radio"]
    ... keep repeating

关键在选择器中。我们将使用

设置input[type="radio"]按钮的样式

input[type="radio"] 
    position: absolute;
    left: -100%;
    top: -100%;
    height: 0;
    display: none;

如上所述，这会将它们从屏幕的一侧提升。但是我们如何点击它们呢？幸运的是，如果您定位 label，它可以为您点击输入！

<label for="radioInputId1">tab title</label>

然后我们为实际的标签设置样式（为简洁起见，我将省略美学样式）：

input[type="radio"] + div.content-holder > label 
    display: inline-block;
    float: left;
    height: 35px;
    width: 33%; /* or whatever width you want */

现在我们的标签应该看起来像div#holder 顶部的“标签”。但是所有这些内容呢？好吧，我们希望它默认全部隐藏，所以我们可以使用以下选择器来定位它：

input[type="radio"] + div.content-holder > div.tab-content 
    display: none;
    position: absolute;
    top: 65px;        /* this depends on your label height */
    width: 100%;

上面的 CSS 是使其工作所需的最少 CSS。 display: none; 之外的所有内容都是您在实际显示 div 时看到的内容。但这在选项卡中没有显示任何内容，所以……现在怎么办？

input[type="radio"]:checked + div.content-holder > div.tab-content 
    display: block;

上述工作的原因是因为:checked 伪类。由于labels 附加到特定的单选按钮，它们会在点击时触发:checked。这会自动关闭所有其他单选按钮。因为我们已经将所有内容包装在 div.content-holder 中，所以我们可以使用下一个同级 CSS 选择器 + 来确保我们只针对特定选项卡。 （尝试使用~ 看看会发生什么！）

这是一个fiddle，适合那些不喜欢stack sn-ps的人，这是一个stack sn-p，适合那些喜欢的人：

#holder 
  border: solid 1px black;
  display: block;
  height: 500px;
  position: relative;
  width: 600px;

p 
  margin: 5px 0 0 5px;

input[type="radio"] 
  display: none;
  height: 0;
  left: -100%;
  position: absolute;
  top: -100%;

input[type="radio"] + div.content-holder > label 
  background-color: #7BE;
  border-radius: 2px;
  color: #333;
  display: inline-block;
  float: left;
  height: 35px;
  margin: 5px 0 0 2px;
  padding: 15px 0 0 0;
  text-align: center;
  width: 33%;

input[type="radio"] + div.content-holder > div 
  display: none;
  position: absolute;
  text-align: center;
  top: 65px;
  width: 100%;

input[type="radio"]:checked + div.content-holder > div 
  display: block;

input[type="radio"]:checked + div.content-holder > label 
  background-color: #B1CF6F;

img 
  left: 0;
  margin: 15px auto auto auto;
  position: absolute;
  right: 0;

<div id="holder">
  <input type="radio" name="tabs" value="1" id="check1" checked>
  <div class="content-holder">
    <label for="check1">one</label>
    <div class="tab-content">
      <p>All my content for the first tab goes here.</p>
    </div>
  </div>
  <input type="radio" name="tabs" value="2" id="check2">
  <div class="content-holder">
    <label for="check2">two</label>
    <div class="tab-content">
      <h2>You can put whatever you want in your tabs!</h2>
      <p>Any content, anywhere!</p>
      <p>
        Remember, though, they're absolutely positioned.
        This means they position themselves relative to
        their parent, div#holder, which is relatively positioned
      </p>
    </div>
  </div>
  <input type="radio" name="tabs" value="3" id="check3">
  <div class="content-holder">
    <label for="check3">three</label>
    <div class="tab-content">
      <p>
        And maybe I want a picture of a nice cat in my third tab!
      </p>
      <img src="http://i.stack.imgur.com/Bgaea.jpg">
    </div>
  </div>
</div>

我设计的标签非常基本。如果您希望它们“包裹”到内容中，您可以通过一些额外的 CSS 工作来做到这一点。