单选按钮显示/隐藏内容答案

【问题标题】：Radio button show/hide content单选按钮显示/隐藏内容
【发布时间】：2014-02-11 17:03:45
【问题描述】：

我正在尝试在没有 javascript 和单选按钮的情况下实现显示/隐藏结果。

我已经成功进入这部分：

<label for="show"><span>show</span></label>
<input type=radio id="show" name="group">
<label for="hide"><span>hide</span></label>    
<input type=radio id="hide" name="group">
<span id="content">Content</span>


input {
    display:none;
}

span#content {
    display:none;
}
input#show:checked ~ span#content {
  display:block;
}

input#hide:checked ~ span#content {
    display:none;
}

演示： http://jsfiddle.net/vtfqW/

我现在要做的是在每次“显示”和“隐藏”按钮处于活动状态时隐藏它们。所以它需要从隐藏的内容开始，只有“显示”按钮，当你点击它时会显示内容，隐藏“显示”按钮并显示“隐藏”按钮。

如果没有 Javascript，这可能吗？

谢谢！

【问题讨论】：

标签： css radio-button show-hide

【解决方案1】：

在两个输入标签之后放置标签标签。如下所示

<input type=radio id="show" name="group">
<input checked type=radio id="hide" name="group">
<label id="id1" for="show"><span id="id1">show</span></label>
<label id="id2" for="hide"><span id="id2">hide</span></label> 
<span id="content">Content</span>

将这些 css 规则添加到现有规则中

input#show:checked ~ label#id1{
  display:none;
}
input#show:checked ~ label#id2{
   display:block;
}

input#hide:checked ~ label#id2{
   display:none;
}
input#hide:checked ~ label#id1{
   display:block;
}

演示http://jsfiddle.net/vtfqW/1/

【讨论】：

虽然看起来不错，但它是通过显示所有内容来加载的还是只是我？
做了 1 个微小的改动，现在效果非常好！非常感谢！
它通过显示所有内容来加载。如果您只是希望最初显示“显示”，请添加“选中”属性以隐藏单选输入。
感谢这个有用的解决方案。但是在我的情况下，我需要将收音机<input>s 放在<fieldset> 内，并且由于某种原因，CSS 不再起作用。如果<input>s 在<fieldset> 中，任何想法为什么以及如何使其工作？
更新：我发现如果跨度也在字段集中，但不在场外，它可以工作。有什么办法让它在外面也能工作吗？参照。 Fiddle

【解决方案2】：

如果您想进行内容切换。菜单切换示例。

input#toogle-content {
  display:none;
}
label#toogle-content div{
   background:silver;
}
span#content {
  display:none;
  background:#333;
  color:#fff;
}
input#toogle-content:checked ~ span#content{
  display:block;
}

<input type="checkbox" id="toogle-content">
<label for="toogle-content" id="toogle-content"><div>Menu</div></label>
<span id="content">Home<br>Marks<br>Other</span>

【讨论】：