Javascript 如何仅使用CSS创建选项卡？

我希望创建一个选项卡系统，如，用户可以在不同的面板之间切换以查看不同的内容：

---

但是，我需要在不使用javascript的情况下完成这项工作，以便未启用javascript的用户可以轻松使用该站点。此外，我希望避免导航到不同的静态

html

页面，每个页面都具有与“选项卡”相对应的不同样式。实现这一点的好方法是什么？

实现仅CSS选项卡的简单方法是使用单选按钮

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

基本的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"] {
    position: absolute;
    left: -100%;
    top: -100%;
    height: 0;
    display: none;
}

如上所述，这会将它们吊离屏幕侧面。但我们如何点击它们呢？幸运的是，如果您的目标是

标签

，它可以为您单击输入

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

现在，我们的标签应该看起来像

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。

显示以外的所有内容：无

是实际显示

div

时将看到的内容。但这在标签上什么都没有显示，所以…现在怎么办

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

上述工作的原因是由于

：checked

伪类。由于

标签

附加到特定的单选按钮上，因此单击时会触发

：checked

。这会自动关闭所有其他单选按钮。因为我们已经将所有内容包装在

div.content-holder

中，所以我们可以使用下一个同级CSS选择器

+

，以确保我们只针对特定的选项卡。（尝试使用

~

看看会发生什么！）

这是一个给不喜欢堆栈片段的人的示例，这是一个给喜欢堆栈片段的人的示例：

#支架{
边框：实心1px黑色；
显示：块；
高度：500px；
位置：相对位置；
宽度：600px；
}
p{
保证金：5px0.5px；
}
输入[type=“radio”]{
显示：无；
身高：0；
左-100%；
位置：绝对位置；
前-100%；
}
输入[type=“radio”]+div.content-holder>标签{
背景色：#7BE；
边界半径：2px；
颜色：#333；
显示：内联块；
浮动：左；
高度：35px；
保证金：5px0.2px；
填充：15px0；
文本对齐：居中；
宽度：33%；
}
输入[type=“radio”]+div.content-holder>div{
显示：无；
位置：绝对位置；
文本对齐：居中；
顶部：65px；
宽度：100%；
}
输入[type=“radio”]：选中+div.content-holder>div{
显示：块；
}
输入[type=“radio”]：选中+div.content-holder>label{
背景色：#B1CF6F；
}
img{
左：0；
保证金：15px自动；
位置：绝对位置；
右：0；
}

一
第一个选项卡的所有内容都在这里

二
你可以在你的标签上放任何你想要的东西！
任何内容，任何地方


但请记住，它们是绝对定位的。
这意味着他们将自己定位在相对的位置
他们的母公司，div#holder，相对定位

三

也许我想在我的第三张标签上画一只漂亮的猫！

@T.J.Crowder复制品呢？虽然答案没有那么详细/具体，但快速搜索会发现：（从2011年开始）。如果问题是“”，我可以理解OP的问答，但我看不出这篇文章有什么好处。@royhowie:奇怪，以前是这样的。

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