如何通过单击单选按钮显示/隐藏DIV？

Question

默认情况下,应隐藏两个DIV.通过选择单选按钮,必须显示相应的DIV(遵循其#ID).

以下是我的代码:

<input type="radio" name='thing' value='valuable' id="bank"/>
<input type="radio" name='thing' value='valuable' id="school"/>

<div id="bank" class="none">Bank</div>
<div id="school" class="none">School</div>

<style> .none { display:none; } </style>

但我们必须一次只显示一个div.可能吗？

Answer 1

这可以使用CSS完成.

注意:<div>s必须是<input>元素的一般兄弟.

HTML:

<form>
    <input type="radio" name="showGreen"> Green
    <input type="radio" name="showRed"> Red
    <div id="green">I am the green div.</div>
    <div id="red">I am the red div.</div>
</form>

CSS:

#green, #red {
    display: none;
    padding: 10px;
}

#green {
    background-color: #6f6;
}

#red {
    background-color: #f44;
}

input[name="showGreen"]:checked ~ #green,
input[name="showRed"]:checked ~ #red {
    display: block;
}

JSFiddle:http://jsfiddle.net/Ly56w/

Answer 2

您可以在data-*此处使用以下属性:

HTML

<input type="radio" name='thing' value='valuable' data-id="bank" />
<input type="radio" name='thing' value='valuable' data-id="school" />

JS

$(':radio').change(function (event) {
    var id = $(this).data('id');
    $('#' + id).addClass('none').siblings().removeClass('none');
});

工作骗局演示