html - 带有 css3 的选项卡，单击时更改样式

<分区>

我正在尝试使用 this recepee在不使用 JS 或 JQuery、纯 CSS 的情况下实现选项卡，但我被卡住了。目标是在点击某个标签时显示不同的内容，并更改标签样式。现在它显示了我想要的标签，但每个 div 的内容以某种方式显示在标签上方，而不是标签下方。另外，我不能让它改变风格。有人可以帮忙吗？谢谢。对不起，如果这个问题看起来很愚蠢 - 我只是从 html 开始。

现在是这样的:

<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>

我的CSS:

    #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 的绝对定位，这是我现在拥有的图片

最佳答案

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

一个更优雅的方式是:

使用opacity 和absolute 定位隐藏你的单选按钮
使选项卡内容容器绝对定位，以使其保持在选项卡按钮下方
显示选中单选按钮的选项卡内容
重新排列 html，顺序是 input，label 然后是 div

HTML

<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>

CSS

#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;
}

这应该没问题

关于html - 带有 css3 的选项卡，单击时更改样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34384694/

上一篇：html - 字体图标未显示在子域上但适用于父域

下一篇：html - 为什么移动版的 flex item 会溢出容器？

相关文章：

html - 当 flexbox 元素以列模式包装时，容器不会增加其宽度

php - 如何删除某些 URL 的 URL 重写

html - 具有第二列响应的固定大小列(列之间的固定边距)

javascript - 如何使用 angularjs 将样式应用于字符串中使用的分隔管道？

javascript - HTML/JS 隐藏基于另一个选定值的选择选项

javascript 替换一个值有意想不到的结果

javascript - 如何获取 FormData 中的多个复选框值？

css - 在 css 中创建笔高亮效果的更简洁方法？

html - 为CSS中的动态框提供位置

javascript - 带有父按钮的自动下拉菜单，可将您带到 Bootstrap 中的另一个页面