0

我正在尝试做一种纯 html/css 选项卡系统。我有

<div>
    <input class="tab1" type="radio" checked/>
    <input class="tab2" type="radio"/>
</div>

<div class="content">
    <div class="tab-1">

    </div>
    <div class="tab-2">

    </div>
</div>

还有我的 CSS

.content > div {
    opacity:0;
}

input.tab1:checked ~ .tab-1, input.tab2:checked ~ .tab-2  {
    opacity: 1
}

但是波浪号~并没有按预期工作（因为 div 不完全是兄弟姐妹） - 我怎样才能让 css 工作到其他节点？有没有办法在css中“说”？

4

4 回答 4

3

你必须上一层，你不能在 CSS 中这样做，因为 CSS 中没有父选择器。您可能想阅读这篇文章：为什么我们在 CSS 中没有父选择器（但是CSS4中会有父选择器）

你可以做什么：

选项 1：更改您的 HTML：

。一种

<input class="tab1" type="radio" checked/>
<input class="tab2" type="radio"/>

<div class="content">
    <div class="tab-1"></div>
    <div class="tab-2"></div>
</div>

并使用input.tab1:checked ~ .content .tab-1

.b尝试像这里描述的结构：http: //css-tricks.com/functional-css-tabs-revisited/ - 基本上，这个想法是你不制作一组选项卡和一组选项卡内容，但是您将每个选项卡与其相应的内容分组。

选项 2：使用 JavaScript（这与纯 CSS 选项卡系统的想法背道而驰，这是真的）

重要提示：请记住，opacity在父节点上设置 < 0 会使所有子节点具有相同的opacity值，您无法更改它（除了再次将父节点的不透明度设置为 1 :P ）。

于 2012-05-28T11:30:24.273 回答
0

使用 a,而不是 a ~。

查看所有 CSS 选择器的列表：

W3 CSS 选择器

于 2012-05-28T11:28:01.103 回答
0

你不能用纯 CSS 做到这一点。tab1和之间没有关系tab-1。

我相信这是取自 jQuery 选项卡标记？您可能最好坚持使用 jQuery 选项卡而不是尝试这样做。

于 2012-05-28T11:28:32.773 回答
0

遗憾的是你不能，因为没有 CSS 方法可以向上移动。您必须使用 Javascript 来执行此操作。

于 2012-05-28T11:28:36.097 回答