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();

当你把它们放在一起时，一切都会起作用。

Answer 4

JQuery - 单击方法。隐藏函数中的相关div，无论状态如何都会隐藏它们。

Answer 5

试试这个：

$('#button-1').select(function() {
    $('#div-1, #div-2, #div-5').show();
    $('#div-3, #div-4, #div-6, #div-7').hide();
});

$('#button-2').select(function() {
    $('#div-1, #div-2, #div-5').hide();
    $('#div-3, #div-4, #div-6, #div-7').show();
});

Answer 6

JSFiddle似乎很慢，但我认为这应该有效：

http://jsfiddle.net/nfypC/4/

$('#div-1').hide();
$('#div-2').hide();
$('#div-3').hide();
$('#div-4').hide();
$('#div-5').hide();
$('#div-6').hide();
$('#div-7').hide();

$("#button-1").click(function () {
    $('#div-1').show();
    $('#div-2').show();
    $('#div-5').show();

    $('#div-3').hide();
    $('#div-4').hide();
    $('#div-6').hide();
    $('#div-7').hide();

});

$("#button-2").click(function () {
    $('#div-1').hide();
    $('#div-2').hide();
    $('#div-5').hide();

    $('#div-3').show();
    $('#div-4').show();
    $('#div-6').show();
    $('#div-7').show();

});

Answer 7

这是相对基础的事情。正如其他人所建议的那样，我建议使用第三方javascript库，如jQuery或PrototypeJs。

如果您选择jQuery，以下页面可以帮助您：http://api.jquery.com/show/，http://api.jquery.com/hide/和http://docs.jquery.com/Main_Page

如果您选择PrototypeJS：http://www.prototypejs.org/api/element/show，http://www.prototypejs.org/api/element/hide和http://www.prototypejs.org/learn。

将来，我会建议您首先访问这些资源，因为这里的大部分答案都是使用这样的库。

此外，这些库做ALOT。真的值得去了解他们！

Answer 8

首先，你的动态是什么意思？你必须在某处编码这段关系。

您为div添加自定义属性的内容如下：

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

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

然后你可以有一个onclick事件，它将获取你点击的按钮的id，显示所有div，其中linktoButton =“button-1”并隐藏其余部分。

您可以在jQuery中使用“Has Attribute”选择器 http://api.jquery.com/has-attribute-selector/

请记住，这种方式必须遍历dom中的每个元素，并且可能很慢。您可能希望拥有一个可以通过ID获取的容器div，并且只需使用子项中的属性选择器。

希望这能指引你朝着正确的方向前进，并且记住，有100种方法可以让这只猫受伤。

Answer 9

<input type="radio" onclick="hideDivOneTwoAndFiveAndShowThreeFourSixAndSeven()" id="button-1" name="button" />Button 1
<input type="radio" onclick="showDivOneTwoAndFiveAndHideThreeFourSixAndSeven()" id="button-2" name="button" />Button 2

function hideDivOneTwoAndFiveAndShowThreeFourSixAndSeven(){
   $("#div-1,#div-2,#div-5").hide();
   $("#div-3,#div-4,#div-5,#div-7").show();
}

function showDivOneTwoAndFiveAndHideThreeFourSixAndSeven(){
   $("#div-1,#div-2,#div-5").show();
   $("#div-3,#div-4,#div-5,#div-7").hide();
}

动态隐藏和显示div

9 个答案: