单选按钮显示/隐藏内容 [英] Radio button show/hide content

问题描述

我试图在不使用JavaScript且仅使用单选按钮的情况下实现显示/隐藏结果.

I am trying to achieve a show/hide result without javascript and just the radio button.

我已经设法进入这一部分:

I've managed to get to this part:

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

我现在要执行的操作是在每次显示"和隐藏"按钮处于活动状态时将其隐藏.因此，它需要从隐藏的内容开始，仅具有显示"按钮，当您单击它以显示内容时，隐藏显示"按钮并向您显示隐藏"按钮.

What I am trying to do now is to hide each time the "Show" and "Hide" buttons when they are active. So it will need to start with hidden content and just has the "Show" button and when you click it show the content, hide the "Show" button and show you the "Hide" button.

如果没有Java脚本，这有可能吗?

Is this possible without Javascript?

谢谢！

推荐答案

在输入标签中的两个标签之后都放置标签标签.像下面一样

Place label tags after both in the input tags. Like below

<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规则添加到现有规则中

Add these css rules to existing rules

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/

这篇关于单选按钮显示/隐藏内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！