我有一些无线电选项,其中包含我想显示/隐藏的类。我有一些具有这些类的div。
.HTML:
<input type="radio" class="one radioselect" value="one" id="one" name="opts" /> <label for="one" class="select radlabel">one</label>
<input type="radio" class="two radioselect" value="two" id="two" name="opts" /> <label for="two" class="select radlabel">two</label>
<div class="one">abc</div>
<div class="two">def</div>
.CSS:
input.one:checked ~ a.one { display:inline; }
input.two:checked ~ a.two { display:inline; }
input.one:checked ~ a:not(.one) { display:none; }
input.two:checked ~ a:not(.two) { display:none; }
现在我的标记必须是这样的:
<div class="row">
<input type="radio" class="one radioselect" value="one" id="one" name="opts" /> <label for="one" class="select radlabel">one</label>
<input type="radio" class="two radioselect" value="two" id="two" name="opts" /> <label for="two" class="select radlabel">two</label>
</div>
<div class="one">abc</div>
<div class="two">def</div>
新的标记意味着输入不再是div 的同级,并且不再应用 CSS(据我了解(。我已经尝试了我能想到的所有选择器组合,也许这在普通 CSS 中是不可能的。我的目标是避免使用CSS的javascript。如果这是一个解决方案,我愿意研究 SASS/LESS。
我已经重新排列了您的 HTML 以获得您所追求的功能。首先,我重命名了您的div 上要显示并隐藏它们的类。
.three { display:none; }
.four { display:none; }
接下来,在选中单选按钮时创建逻辑,显示div。
input.one[type=radio]:checked ~ .three { display:block; }
input.two[type=radio]:checked ~ .four { display:block; }
现在一旦编译成一个,它应该如下所示:
.three { display:none;color:#ff0000;}
.four { display:none;color:#FF8C00;}
input.one[type=radio]:checked ~ .three { display:block; }
input.two[type=radio]:checked ~ .four { display:block; }
<div class="row">
<input type="radio" class="one radioselect" value="one" id="one" name="opts" /> <label for="one" class="select radlabel">Radio one</label>
<input type="radio" class="two radioselect" value="two" id="two" name="opts" /> <label for="two" class="select radlabel">Radio two</label>
<div class="three">Radio one DIV</div>
<div class="four">Radio two DIV</div>
</div>
让我知道这是否适合您。
根据Gaby的评论,我调整了标记,使其看起来更像这样:.HTML
<div class="row">
<label for="one" class="select radlabel">one</label>
<label for="two" class="select radlabel">two</label>
</div>
<input type="radio" class="one radioselect hide" value="one" id="one" name="opts" />
<input type="radio" class="two radioselect hide" value="two" id="two" name="opts" />
<div class="one">abc</div>
<div class="two">def</div>
.CSS
input.one:checked ~ a.one { display:inline; }
input.two:checked ~ a.two { display:inline; }
input.one:checked ~ a:not(.one) { display:none; }
input.two:checked ~ a:not(.two) { display:none; }
过滤确实有效,但无线电选项不可见,我能为视觉提示做的最好的事情是在 :active 时给标签样式。
它足以满足我的需求。