Question

我目前正在尝试使用没有javaScript的TAB，只使用html和CSS，我发现可以使用单选按钮

<body>

<div id="a1" class="a1">
   <div id="a2" class="a2">
     <div id="a3" class="a3">

       <div id="menu" class="menu">
         <div id="menu-1"> <input id=radio-1 checked ><label></label> </div>
         <div id="menu-2"> <input id=radio-2><label></label> </div>
         <div id="menu-3"> <input id=radio-3><label></label> </div>
       </div>

   </div>
 </div>
</div>

<div id="b1" class="b1">
   <div id="b2" class="b2">
     <div id="container" class="container">

        <div id="content1" class="content1"></div>
        <div id="content1" class="content1"></div>
        <div id="content1" class="content1"></div>

     </div>
  </div>
</div>

</body>

如果radio-buton和content是兄弟标签中的两个元素/具有相同的父元素，我可以使用组合子“〜”或者如果它是下一个o eachothers，我可以使用“+”将这些元素组合为选择器，如果选中任何radio-“n”，则“{}”中的代码在content-“n”元素中工作（它显示＆amp; transite to conten-“n”），如下所示：

/* CSS */ 

#radio-1:checked ~ .content-1,
#radio-1:checked ~ .content-2,
#radio-1:checked ~ .content-3 {           
     opacity: 1;
     transition: all 1s;
     blablabla;
     blablabla;
 }

/* CSS */

但问题出在上面我的html设计中，radiobutton并且内容已经在不同的世界中放置太多了......或者你可以说他们有不同的父树。

如果我不改变html设计，是否有另一种方法可以将具有不同父树的元素连接/组合到CSS中的选择器中？

-Thank Youu ...

Answer 1

正如您所说的那样，单选按钮（实际上是示例中的文本输入，因为类型radio和名称都缺失）远远超出CSS选择器的范围。

因此，如果HTML保持不变，那么您将非常有义务使用javascript。

一种简单的方法是确保在单选按钮上都有事件处理程序并监听更改（在选择中）。

working fiddle证明了这一点。（请注意，我冒昧地减少了HTML中id属性的数量，并将type和name属性添加到<input>元素

然而，可以在不使用javascript的情况下解决这个问题，尽管它需要更改HTML（稍微但仍然）。诀窍是确保单选按钮位于上方或标签及其内容所在的位置。

诀窍是使用（或滥用）该选项让标签引用页面上的输入元素并隐藏单选按钮。

Simple demonstration使用非常简化的HTML集。

＆＃13;

.trickery > input {
  display: none;
}
.tabs > label {
  display: inline-block;
  width: 8em;
  border: 1px solid gold;
}
.container > div {
  display: none;
  min-height: 8em;
  border: 1px solid gold;
}
#tab-1:checked ~ .tabs [for=tab-1],
#tab-2:checked ~ .tabs [for=tab-2],
#tab-3:checked ~ .tabs [for=tab-3] {
  background-color: gold;
}
[value=content-1]:checked ~ .container #content-1,
[value=content-2]:checked ~ .container #content-2,
[value=content-3]:checked ~ .container #content-3 {
  display: block;
}

＆＃13;

<div class=trickery>
  <input id=tab-1 type=radio name=tab value=content-1 checked>
  <input id=tab-2 type=radio name=tab value=content-2>
  <input id=tab-3 type=radio name=tab value=content-3>

  <div class=tabs>
    <label for=tab-1>tab one</label>
    <label for=tab-2>tab two</label>
    <label for=tab-3>tab three</label>
  </div>

  <div class=container>
    <div id=content-1>content one</div>
    <div id=content-2>content two</div>
    <div id=content-3>content three</div>
  </div>
</div>

＆＃13;

HTML中的主要变化是将radio按钮向上移动到足够高的位置以允许“<1}}按钮到达＆＃39;选项卡和其中的内容（给定结构，这将在标签之前作为正文的直接子项）

如何在CSS中组合两个具有不同父级的元素？

1 个答案: