动态隐藏和显示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();
});

Answer 2

the solution is in  jQuery

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

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

    $('#button-1').click(function(){
    $('.c1').show();
    $('.c2').hide();
    })

    $('#button-2').click(function(){
    $('.c2').show();
    $('.c1').hide();
    })

Answer 3

尝试使用jquery中的以下部分

$('#button-1').click(function(){.... your code here .... });
$('#button-2').click(function(){.... your code here .... });

和

$('#div-1').show();

和

$('#div-2').hide();

当你把所有的都放在一起的时候，一切都会成功的。