Html 带有css3的选项卡，单击即可更改样式

我正试图在不使用JS或JQuery（纯CSS）的情况下使用来实现选项卡，但我被卡住了。 目标是在单击某个标签时显示不同的内容，并更改标签样式。 现在它显示我想要的标签，但每个div的内容不知怎么地显示在标签上，而不是下面。而且，我不能让它改变风格。有人能帮忙吗？谢谢抱歉，如果这个问题看起来很愚蠢-我只是从html开始

现在是这样的：

更新：

由于目标div的绝对定位，这是我现在看到的图片

---

您的兄弟选择器有问题。+符号应选择HTML中的下一个同级元素，请参阅

更优雅的方法是：

使用不透明度和绝对定位隐藏单选按钮 使选项卡内容容器处于绝对位置，使其位于选项卡按钮下方 显示选中单选按钮的选项卡内容 重新排列html，以便输入顺序，然后添加标签和div HTML

---

这应该很好

为什么要首先使用菜单+输入？hmm@SzymonDziewo看来这并不影响结果。此外，我还添加了我以前错过的css的另一部分。对于初学者来说，菜单+输入的规则永远不会起作用告诉CSS找到兄弟姐妹。但是，您的输入是菜单的子项，而不是它的同级项。此外，您的输入：选中的标签规则将不起作用，因为标签是输入的同级项，但这告诉CSS查找属于菜单子项的标签input@tbernard我编辑了，请看，仍然不能按需要工作这太棒了。根据一些原则，我试着在输入后加上标签，但仍然在胡乱摆弄。非常感谢，我感谢你的帮助。我也学到了很多。不幸的是，我面临的问题是：如果它是页面上唯一的元素，它就可以工作，但是如果我把它放在一些被其他div包围的div中，选项卡会改变它们的样式，但是相关div会显示在绝对位置的顶部，覆盖所有其他内容。如果我删除位置：绝对；从菜单>div，它完全破坏了设计，你能检查一下吗？谢谢举个例子：content div是用来显示数据列表的，所以它们可以是任意大小的。你能截图让我看看发生了什么吗？我使用绝对定位的原因是，所有的div都可以停留在标签下面，就像一堆卡片。请检查我更新的问题。

<div id="menu">
    <label class="collapse" for="1">tab1</label> <input id="1" name="r" type="radio" />
    <div>111111111111111111111</div>
    <label class="collapse" for="2">tab2</label> <input id="2" name="r" type="radio"/>
    <div>2222222222222222222222</div>
    <label class="collapse" for="3">tab3</label> <input id="3" name="r" type="radio" />
    <div>333333333333333333333</div>
</div>

    #menu {
        padding-left: 20px;
    }

    #menu label {
        height: 30px;
        background-color: #d1ecee;
        width: 75px;
        color: #2cb674;
        font-size: 12px;
        line-height: 30px;
        text-align: center;
        float: left;
        position: relative;
        margin-left: 2px;
    display:block;
        margin-right: 20px;
    }

    #menu label:before {
        content: "";
        position: absolute;
        left: -20px;
        width: 0;
        height: 0;
        border-top: 30px solid #d1ecee;
        border-left: 20px solid transparent;
    display:block;
    }

    #menu label:after {
        content: "";
        position: absolute;
        right: -20px;
        width: 0;
        height: 0;
        border-bottom: 30px solid #d1ecee;
        border-right: 20px solid transparent;

    }

#menu input {
    display: none !important;
}

#menu input+* {
    display: none !important;
}
#menu input:checked+* {
    display: block !important;
}

#menu input:checked+label {
    background-color: #2cb674;
    color: white;
}

#menu input:checked+label:before {
    border-top: 30px solid #2cb674;
}

#menu input:checked+label:after {
    border-bottom: 30px solid #2cb674;
}

<div id="menu">

    <!-- Selected by default -->

    <input id="1" name="r" type="radio" checked/>
    <label class="collapse" for="1">tab1</label>
    <div>111111111111111111111</div>

    <input id="2" name="r" type="radio"/>
    <label class="collapse" for="2">tab2</label>
    <div>2222222222222222222222</div>

    <input id="3" name="r" type="radio" />
    <label class="collapse" for="3">tab3</label>
    <div>333333333333333333333</div>
</div>

#menu {
    padding-left: 20px;
}
#menu label {
    height: 30px;
    background-color: #d1ecee;
    width: 75px;
    color: #2cb674;
    font-size: 12px;
    line-height: 30px;
    text-align: center;
    float: left;
    position: relative;
    margin-left: 2px;
    display:block;
    margin-right: 20px;
}
#menu label:before {
    content: "";
    position: absolute;
    left: -20px;
    width: 0;
    height: 0;
    border-top: 30px solid #d1ecee;
    border-left: 20px solid transparent;
    display:block;
}
#menu label:after {
    content: "";
    position: absolute;
    right: -20px;
    width: 0;
    height: 0;
    border-bottom: 30px solid #d1ecee;
    border-right: 20px solid transparent;
}
#menu input:checked + label {
    background-color: #2cb674;
    color: white;
}
#menu input:checked + label:before {
    border-top: 30px solid #2cb674;
}

#menu input:checked + label:after {
    border-bottom: 30px solid #2cb674;
}

/* Hide radio buttons */
#menu input[type=radio]{
    opacity:0;
    position:absolute;
    left:-200%;
}

/* Hide all tab divs and keep them below the tab buttons */
#menu > div {
    display:none;
    top:5em;
    position:absolute;
    max-width:100%;
}

/* Show the tab whose sibling radio button is checked */
#menu input:checked + label + div{
    display:block;
}