仅使用 CSS 检查单选按钮后切换 div 内容答案

【问题标题】：Toggle div content after a radio button is checked using CSS only仅使用 CSS 检查单选按钮后切换 div 内容
【发布时间】：2021-10-31 01:46:56
【问题描述】：

当单选按钮与“content1”和“content2”处于同一div级别时，它是有效的，
如果我将单选按钮放在 div“秒”之外的另一个 div 上，如何使其工作

假设 toggle1 被选中，那么 content1 就会显示出来

（仅使用 CSS 和 HTML，不使用 javascript）

.content1 {
  display: none;
}

.content2 {
  display: none;
}

.toggle1:checked ~ .grid-container .content1 {
  display: block;
}

.toggle2:checked ~ .grid-container .content2 {
  display: block;
}

<div class="level1">
  <div class="level2">
    <input type=radio id="toggle1" name="toggle" class="toggle1">
    <label for="toggle1">toggle1</label>
    <input type=radio id="toggle2" name="toggle" class="toggle2">
    <label for="toggle2">toggle2</label>
    <div>
      <div>
        <div class="second">
          <div class="tab content1">Content1</div>
          <div class="tab content2">Content2</div>
        </div>

【问题讨论】：

我没有看到“grid-container”类的元素。此外，当使用general sibling combinator ~ 时，这两个元素必须是“同一父元素的子元素”。
鉴于您显示的 HTML 结构，您不能仅使用 CSS 来实现。你能改变结构吗？（听起来好像你以前有不同的结构）。

标签： html css

【解决方案1】：

当使用general sibling combinator ~ 时，这两个元素必须是“同一个父元素的子元素”。给定您现有的代码，将“grid-container”类应用于<div>，它是<input> 元素的兄弟。

.content1,
.content2 {
  display: none;
}

.toggle1:checked ~ .grid-container .content1,
.toggle2:checked ~ .grid-container .content2 {
  display: block;
}

<div class="level1">
  <div class="level2">
    <input type=radio id="toggle1" name="toggle" class="toggle1">
    <label for="toggle1">toggle1</label>
    <input type=radio id="toggle2" name="toggle" class="toggle2">
    <label for="toggle2">toggle2</label>
    <div class="grid-container">
      <div>
        <div class="second">
          <div class="tab content1">Content1</div>
          <div class="tab content2">Content2</div>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：