html - 选中单选按钮时的 CSS 和隐藏/显示 div

Question

如果单选按钮 #my102 被选中，div #navi102 应该是可见的，所有其他的 #navi???应该隐藏div。所以，如果单选按钮#my7 被选中，div #navi7 应该是可见的，所有其他#navi？隐藏的 div。

我该怎么做？

CSS 代码:

.list {
}

.opt ~ .list {
  display: none;
}

.opt:checked ~ .list {
  display: block;
}

input[type="radio"]#my1:checked + div #navi1 { display: block; }
input[type="radio"]#my2:checked + div #navi2 { display: block; }
input[type="radio"]#my3:checked + div #navi3 { display: block; }
input[type="radio"]#my4:checked + div #navi4 { display: block; }
input[type="radio"]#my5:checked + div #navi5 { display: block; }
input[type="radio"]#my6:checked + div #navi6 { display: block; }
input[type="radio"]#my7:checked + div #navi7 { display: block; }
input[type="radio"]#my99:checked + div #navi99 { display: block; }
input[type="radio"]#my100:checked + div #navi100 { display: block; }
input[type="radio"]#my101:checked + div #navi101 { display: block; }
input[type="radio"]#my102:checked + div #navi102 { display: block; }

HTML代码:

<div id="chart" style="white-space: nowrap; position: relative; text-align: center;">
  <div style="display: inline-block">
    <!--
    --><input name="case" type="radio" id="my102" class="opt" /><div class="list" style="float:left;width:70px">&nbsp;
    <div id="navi102">
      <div style="z-index:100;position:fixed;right:0;top:50px">101</div>
    </div>
    </div><div style="display: inline-block;vertical-align:top;width:70px">extra
    </div><!--
    --><input name="case" type="radio" id="my101" class="opt" /><div class="list" style="float:left;width:350px">&nbsp;
    <div id="navi101">
      <div style="z-index:100;position:fixed;left:0;top:100px">102</div>
      <div style="z-index:100;position:fixed;right:0;top:100px">7</div>
    </div>
    </div><div style="display: inline-block;vertical-align:top;width:350px">LQ
    </div><!--
    --><input name="case" type="radio" id="my7" class="opt" /><div class="list" style="float:left;width:350px">&nbsp;
    <div id="navi7">
      <div style="z-index:100;position:fixed;left:0;top:150px">101</div>
      <div style="z-index:100;position:fixed;right:0;top:150px">6</div>
    </div>
    </div><div style="display: inline-block;vertical-align:top;width:350px">L4
    </div><!--
    --><input name="case" type="radio" id="my6" class="opt" /><div class="list" style="float:left;width:350px">&nbsp;
    <div id="navi6">
      <div style="z-index:100;position:fixed;left:0;top:200px">7</div>
      <div style="z-index:100;position:fixed;right:0;top:200px">4</div>
    </div>
    </div><div style="display: inline-block;vertical-align:top;width:350px">L3
    </div><!--
    --><input name="case" type="radio" id="my4" class="opt" /><div class="list" style="float:left;width:350px">&nbsp;
    <div id="navi4">
      <div style="z-index:100;position:fixed;left:0;top:250px">6</div>
      <div style="z-index:100;position:fixed;right:0;top:250px">3</div>
    </div>
    </div><div style="display: inline-block;vertical-align:top;width:350px">L2
    </div><!--
    --><input name="case" type="radio" id="my3" class="opt" /><div class="list" style="float:left;width:350px">
    <div id="navi3">
      <div style="z-index:100;position:fixed;left:0;top:300px">4</div>
      <div style="z-index:100;position:fixed;right:0;top:300px">1</div>
    </div>
    </div><div style="display: inline-block;vertical-align:top;width:350px">R1
    </div><!--
    --><input name="case" type="radio" id="my1" class="opt" checked="checked" /><div class="list" style="float:left;width:0">
    <div id="navi1">
      <div style="z-index:100;position:fixed;left:0;top:350px">3</div>
      <div style="z-index:100;position:fixed;right:0;top:350px">2</div>
    </div>
    </div><div style="display: inline-block;vertical-align:top;width:350px">W2
    </div><!--
    --><input name="case" type="radio" id="my2" class="opt" /><div class="list" style="float:right;width:350px">&nbsp;
    <div id="navi2">
      <div style="z-index:100;position:fixed;left:0;top:400px">1</div>
      <div style="z-index:100;position:fixed;right:0;top:400px">5</div>
    </div>
    </div><div style="display: inline-block;vertical-align:top;width:350px">WQ
    </div><!--
    --><input name="case" type="radio" id="my5" class="opt" /><div class="list" style="float:right;width:350px">&nbsp;
    <div id="navi5">
      <div style="z-index:100;position:fixed;left:0;top:450px">2</div>
      <div style="z-index:100;position:fixed;right:0;top:450px">100</span></div>
    </div>
    </div><div style="display: inline-block;vertical-align:top;width:70px">extra
    </div><!--
    --><input name="case" type="radio" id="my100" class="opt" /><div class="list" style="float:right;width:70px">&nbsp;
    <div id="navi100">
      <div style="z-index:100;position:fixed;left:0;top:500px">5</div>
    </div>
    </div><!--

    --><div style="z-index:99;width:70px;position:fixed;left:0;top:100px;margin:auto;background-color:red"><br />
    </div>

    <div style="z-index:99;width:70px;position:fixed;right:0;top:100px;margin:auto;background-color:red"><br />
    </div>
  </div>
</div>

Answer 1

1. 您的 html 中有错误。有 </span> ，但我找不到该标签的任何开头。
2. 页面看起来像坏了。它太宽了，空的空间看起来很奇怪……

也许你想要那个，我只是说。这就是为什么我会用简单的例子来写它，而不是完整的代码(这很难阅读并且结果很难检查)。

#content1
{
    display:none;
}

#content2
{
    display:none;
}

#toggle1:checked ~ #content1
{
  display: block;
}

#toggle2:checked ~ #content2
{
  display: block;
}

<input type=radio id="toggle1" name="toggle">Toggle1
<input type=radio id="toggle2" name="toggle">Toggle2

<br><br>

<span id="content1">Content1</span>
<span id="content2">Content2</span>

让我们从 html 开始。有一件重要的事情。 input和 span在文档树中共享相同的父级。为什么它很重要？由于CSS中的通用兄弟组合器。

好的，现在是 css。

首先，我正在创建“起始状态”。 #content1和 #content2是无形的，正如你所愿。 (我可以在 css 中写 #content1, #content2 { display:none; } ，没关系。)

其次，我正在创造您想要做的事情。我只使用 id，应该足够了。您使用的是 +在 css 中，我使用了 ~ .在我看来——使用元素 ID 会更好。即使 + 足够了。

The ~ combinator separates two selectors and matches the second element only if it is preceded by the first, and both share a common parent.

Quote from developer.mozilla.org

更多信息在 w3.org – general sibling combinators