选中单选按钮时，CSS和隐藏/显示div

Question

如果选中单选按钮#my102，则应显示div＃navi102和所有其他#navi ???应该隐藏div。那么，如果选中单选按钮#my7，div＃navi7应该是可见的还是所有其他#navi？ divs hidden。

我怎么能这样做？

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 code：

<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. 页面看起来像破碎。它的宽度和空白空间看起来很奇怪......

也许你想要那个，我只是说。这就是为什么我会在简单的例子中写出来的原因，而不是整个代码（难以阅读并且难以检查）。

＆＃13;
＆＃13;
#content1
{
    display:none;
}

#content2
{
    display:none;
}

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

#toggle2:checked ~ #content2
{
  display: block;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

让我们从html开始。有一件重要的事情。 input和span在文档树中共享同一个父级。它为什么重要？因为css中的一般兄弟组合子。

好的，现在是css。

首先，我正在创建＆＃34;开始状态＆＃34;。 #content1和#content2是不可见的，就像您想要的那样。 （我可以在css #content1, #content2 { display:none; }中写一下，这并不重要。）

其次，我正在制作你正在尝试做的魔法。我只使用id而且应该足够了。您在css中使用了+，我使用了~。在我看来 - 当你使用元素id时，它会更好。即使在+足够的时候。

  

〜combinator分隔两个选择器，并且仅当第二个元素前面有第一个元素时才匹配第二个元素，并且它们共享一个公共父元素。

Quote from developer.mozilla.org

更多w3.org – general sibling combinators

Answer 2

在这种情况下创建代码的最小版本会有很大帮助 - 您的代码似乎是正确的，但很难对此进行故障排除：

https://jsfiddle.net/17jaf4un/4/

HTML：

<div>
  <input type="checkbox" id="ch1" />
  <div>
    <div id="d1">first</div>
  </div>
  <input type="checkbox" id="ch2" />
  <div>
    <div id="d2">second</div>
  </div>
</div>

CSS：

input#ch1:checked + div #d1 {
  border: 1px solid red;
}

input#ch2:checked + div #d2 {
  border: 1px solid blue;
}

Answer 3

这是我自己的解决方案。

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">
    <!--
    --><DIV STYLE="DISPLAY:INLINE-BLOCK"><input name="case" type="radio" id="my102" class="opt" /><div class="list" style="float:left;width:0">
    <div id="navi102">
      <div style="z-index:100;position:fixed;right:0;top:50px">101</div>
    </div>
    </div></DIV><div style="display: inline-block;vertical-align:top;width:70px">extra
    </div><!--
    --><DIV STYLE="DISPLAY:INLINE-BLOCK"><input name="case" type="radio" id="my101" class="opt" /><div class="list" style="float:left;width:0">
    <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><div style="display: inline-block;vertical-align:top;width:350px">LQ
    </div><!--
    --><DIV STYLE="DISPLAY:INLINE-BLOCK"><input name="case" type="radio" id="my7" class="opt" /><div class="list" style="float:left;width:0">
    <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><div style="display: inline-block;vertical-align:top;width:350px">L4
    </div><!--
    --><DIV STYLE="DISPLAY:INLINE-BLOCK"><input name="case" type="radio" id="my6" class="opt" /><div class="list" style="float:left;width:0">
    <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><div style="display: inline-block;vertical-align:top;width:350px">L3
    </div><!--
    --><DIV STYLE="DISPLAY:INLINE-BLOCK"><input name="case" type="radio" id="my4" class="opt" /><div class="list" style="float:left;width:0">
    <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><div style="display: inline-block;vertical-align:top;width:350px">L2
    </div><!--
    --><DIV STYLE="DISPLAY:INLINE-BLOCK"><input name="case" type="radio" id="my3" class="opt" /><div class="list" style="float:left;width:0">
    <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><div style="display: inline-block;vertical-align:top;width:350px">R1
    </div><!--
    --><DIV STYLE="DISPLAY:INLINE-BLOCK"><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><div style="display: inline-block;vertical-align:top;width:350px">W2
    </div><!--
    --><DIV STYLE="DISPLAY:INLINE-BLOCK"><input name="case" type="radio" id="my2" class="opt" /><div class="list" style="float:right;width:0">
    <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><div style="display: inline-block;vertical-align:top;width:350px">WQ
    </div><!--
    --><DIV STYLE="DISPLAY:INLINE-BLOCK"><input name="case" type="radio" id="my5" class="opt" /><div class="list" style="float:right;width:0">
    <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</div>
    </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:0">
    <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>