html - 颜色不会更改对应于纯 CSS 选项卡布局中选中的单选

Question

我想只用 HTML 和 CSS制作一个选项卡布局，没有任何 JavaScript/jQuery 或其他东西，我在互联网上看到过一些类似这样的教程。但是，根据当前选项卡的颜色更改不起作用。我不知道导致此类问题的代码有什么问题。下面我的代码有什么问题？非常感谢任何输入/建议/更正。谢谢你。

.restaurant-detail__tabs {
    width: 100%;
    margin: 70px auto;
}

.restaurant-detail__tabs-labels {
    width: 100%;
    list-style: none;
    padding: 0;
    display: block;
}

.restaurant-detail__tabs-label {
    display: inline;
    padding: 10px 20px;
    font-size: 24px;
    font-weight: normal;
    cursor: pointer;
}

.restaurant-detail__tabs-label:hover,
label:hover {
    color: red;
    cursor: pointer;
}

.restaurant-detail__tabs__tab-content {
    display: none;
    width: 100%;
    border-top: 2px solid #aaa;
}

input[type="radio"] {
    display: none;
}

#tab1:checked ~ #tab-content1,
#tab2:checked ~ #tab-content2 {
    display: block;
}

#tab1:checked ~ #li-label1,
#tab2:checked ~ #li-label2 {
    border-bottom: 5px solid red;
    box-sizing: border-box;
    background-color: red;
    color: red;
}

#tab1:checked ~ #label1,
#tab2:checked ~ #label2 {
    border-bottom: 5px solid red;
    box-sizing: border-box;
    background-color: red;
    color: red;
}

<div class="restaurant-detail__tabs">
    <input type="radio" checked name="tabs" id="tab1" />
    <input type="radio" name="tabs" id="tab2" />
    <ul class="restaurant-detail__tabs-labels" role="tablist">
        <li class="restaurant-detail__tabs-label" id="li-label1">
            <label for="tab1" id="label1">Menu</label>
        </li>
        <li class="restaurant-detail__tabs-label tab2" id="li-label2">
            <label for="tab2" id="label2">Reviews</label>
        </li>
    </ul>
    <div id="tab-content1" class="restaurant-detail__tabs__tab-content">
        This is Menu
    </div>
    <div id="tab-content2" class="restaurant-detail__tabs__tab-content">
        <div class="restaurant-detail__review">
            <div class="restaurant-detail__review-items">
                This is Review
            </div>
        </div>
    </div>
</div>

标签： htmlcss

Answer 1

您需要ul在访问的选择器中指定li状态:checked。因为~运算符在当前级别的元素有效，但对子级无效。

像那样：

#tab1:checked ~ ul #li-label1,
#tab2:checked ~ ul #li-label2 {
    ...
}

通用兄弟组合(~)器分隔两个选择器并匹配第二个元素的所有迭代，它们在第一个元素之后（尽管不一定立即），并且是同一父元素的子元素。

.restaurant-detail__tabs {
    width: 100%;
    margin: 70px auto;
}

.restaurant-detail__tabs-labels {
    width: 100%;
    list-style: none;
    padding: 0;
    display: block;
}

.restaurant-detail__tabs-label {
    display: inline;
    padding: 10px 20px;
    font-size: 24px;
    font-weight: normal;
    cursor: pointer;
}

.restaurant-detail__tabs-label:hover,
label:hover {
    color: red;
    cursor: pointer;
}

.restaurant-detail__tabs__tab-content {
    display: none;
    width: 100%;
    border-top: 2px solid #aaa;
}

input[type="radio"] {
    display: none;
}

#tab1:checked ~ #tab-content1,
#tab2:checked ~ #tab-content2 {
    display: block;
}

#tab1:checked ~ ul #li-label1,
#tab2:checked ~ ul #li-label2 {
    border-bottom: 5px solid red;
    box-sizing: border-box;
    background-color: red;
    color: white;
}

#tab1:checked ~ #label1,
#tab2:checked ~ #label2 {
    border-bottom: 5px solid red;
    box-sizing: border-box;
    background-color: red;
    color: red;
}

<div class="restaurant-detail__tabs">
    <input type="radio" checked name="tabs" id="tab1" />
    <input type="radio" name="tabs" id="tab2" />
    <ul class="restaurant-detail__tabs-labels" role="tablist">
        <li class="restaurant-detail__tabs-label" id="li-label1">
            <label for="tab1" id="label1">Menu</label>
        </li>
        <li class="restaurant-detail__tabs-label tab2" id="li-label2">
            <label for="tab2" id="label2">Reviews</label>
        </li>
    </ul>
    <div id="tab-content1" class="restaurant-detail__tabs__tab-content">
        This is Menu
    </div>
    <div id="tab-content2" class="restaurant-detail__tabs__tab-content">
        <div class="restaurant-detail__review">
            <div class="restaurant-detail__review-items">
                This is Review
            </div>
        </div>
    </div>
</div>