Question

我试图在没有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/

我现在要做的是每次隐藏＆＃34;显示＆＃34;和＆＃34;隐藏＆＃34;按钮处于活动状态时。所以它需要从隐藏的内容开始，并且只需要显示＆＃34;显示＆＃34;按钮，当您单击它显示内容时，隐藏＆＃34;显示＆＃34;按钮，并显示＆＃34;隐藏＆＃34;按钮。

没有Javascript可以实现吗？

谢谢！

Answer 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;
}

demo http://jsfiddle.net/vtfqW/1/

Answer 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>

单选按钮显示/隐藏内容

2 个答案: