单选按钮选中时CSS和隐藏/显示div [英] CSS and hiding/showing divs when radio button checked
本文介绍了单选按钮选中时CSS和隐藏/显示div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如果选中了单选按钮#my102，则div#navi102应该可见，而所有其他#navi ???divs应该被隐藏.因此，如果选中了单选按钮#my7，则div#navi7应该可见，而其他所有#navi?div已隐藏.
我该怎么办?
CSS代码:
.list {}.opt〜.list {显示:无；}.opt:已选中〜.list {显示:块；}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"><！--><输入name ="case" type ="radio" id ="my102" class ="opt"/>< div class ="list" style ="float:left; width:70px"> < 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><！--><输入name ="case" type ="radio" id ="my101" class ="opt"/>< div class ="list" style ="float:left; width:350px"> < 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><！--><输入name ="case" type ="radio" id ="my7" class ="opt"/>< div class ="list" style ="float:left; width:350px"> < 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><！--><输入name ="case" type ="radio" id ="my6" class ="opt"/>< div class ="list" style ="float:left; width:350px"> < 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><！--><输入name ="case" type ="radio" id ="my4" class ="opt"/>< div class ="list" style ="float:left; width:350px"> < 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><！--><输入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><！--><输入名称="case" type =无线电" id ="my1" class ="opt"已选中="checked"/>< div class =列表" style ="float:left;宽度: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><！--><输入name ="case" type ="radio" id ="my2" class ="opt"/>< div class ="list" style ="float:right; width:350px"> < 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><！--><输入name ="case" type ="radio" id ="my5" class ="opt"/>< div class ="list" style ="float:right; width:350px"> < 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><！--><输入name ="case" type ="radio" id ="my100" class ="opt"/>< div class ="list" style ="float:right; width:70px"> < 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> 解决方案
- 您的html中有错误.有
</span>，但是我找不到该标签的任何开头. - 页面看起来像坏了.太宽了，空白看起来很奇怪...
我只是说你也许想要那个.这就是为什么我要在一个简单的示例上而不是整个代码上编写它的原因(这很难阅读且难以检查).
#content1{显示:无；}#content2{显示:无；}#toggle1:已选中〜#content1{显示:块；}#toggle2:已选中〜#content2{显示:块；} <输入类型=无线电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.即使+足够.
〜组合符分隔两个选择器，并且仅在第二个元素位于第一个元素之后且与第二个元素匹配时，且两者都共享一个公共父元素.
更多信息，请参见 w3.org –通用的同级组合器
If the radio button #my102 is checked, the div #navi102 should be visible and all other #navi??? divs should be hidden. So, if the radio button #my7 is checked, the div #navi7 should be visible and all other #navi? divs hidden.
How could I do that?
CSS code:
.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">
<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">
<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">
<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">
<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">
<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">
<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">
<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">
<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>
解决方案
- You have errors in your html. There's
</span>, but I can't find any opening of that tag. - Page looks like broken. It's sooo width and empty space looks strange...
Maybe you want that, I'm just saying. That's the reason why I'll write it on simple example, not whole your code (which's hard to read and result hard to check).
#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>
Let's start from html. There is one important thing. input and span share the same parent in the document tree. Why it's important? Because of general sibling combinator in css.
Ok, now css.
Firstly I'm creating "starting state". #content1 and #content2 are invisible, just as you want. (I could write in css #content1, #content2 { display:none; }, that doesn't matter.)
Secondly I'm making that magic what you're trying to do. I'm using just id and it should be enough. You were using + in css, I've used ~. In my opinion – it's better when you're using element id. Even when + enough.
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
More at w3.org – general sibling combinators
这篇关于单选按钮选中时CSS和隐藏/显示div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
