动态隐藏和显示div

Question

如何使用JavaScript动态实现此目的？

onselect单选按钮1:显示div 1,2,5,隐藏(如果尚未隐藏)div 3,4,6,7

onselect单选按钮2:显示div 3,4,6,7,隐藏(如果尚未隐藏)div 1,2,5

<input type="radio" id="button-1" name="button" />Button 1
<input type="radio" id="button-2" name="button" />Button 2

<div id="div-1"></div>
<div id="div-2"></div>
<div id="div-3"></div>
<div id="div-4"></div>
<div id="div-5"></div>
<div id="div-6"></div>
<div id="div-7"></div>

编辑我很好地提出了我的问题,下班后在家时会更好地制定它.

Answer 1

为了方便自己,可以在两组单选按钮中添加一个类,例如divGroup1,divGroup2

    <div class="divGroup1" id="div-1"></div>
    <div class="divGroup1" id="div-2"></div>
    <div class="divGroup2" id="div-3"></div>
    <div class="divGroup2" id="div-4"></div>
    <div class="divGroup1" id="div-5"></div>
    <div class="divGroup2" id="div-6"></div>
    <div class="divGroup2" id="div-7"></div>

然后在jQuery中,做这样的事情:

$("#button-1").click(function()
{
    $(".divGroup1").show();
    $(".divGroup2").hide();
});

$("#button-2").click(function()
{
    $(".divGroup2").show();
    $(".divGroup1").hide();
});