動態隱藏和顯示div

如何使用JavaScript動態實現此目的？動態隱藏和顯示div

ONSELECT單選按鈕1：顯示格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>

編輯我制定了我的問題不當，將更好地制定它時，在下班回家後..

來源

2011-07-28 Sander

您將此標記爲jQuery，所以您必須知道。閱讀文檔。 –

當然這應該被視爲一個出價？ – jamesmhaley

爲了方便自己，添加一個類兩組單選按鈕，像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(); 
});

來源

2011-07-28 14:30:17

嘗試使用以下零件來自jquery

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

和

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

和

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

，當你把它放在一起它將所有的工作。

來源

2011-07-28 14:29:27 Soren

JQuery - 單擊方法。在函數中隱藏相關的div，這會隱藏它們的狀態。

來源

2011-07-28 14:29:37

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

來源

2011-07-28 14:30:18 banners

-1

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

來源

2011-07-28 14:32:36 Maxx

神聖的長功能名稱蝙蝠俠 –

也許我從字面上理解了這個問題，但你不能說這不是他要求的。 – Maxx

awww，兩個downvotes？你們沒有幽默感。 – Maxx

試試這個：

$('#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(); 
});

來源

2011-07-28 14:33:41

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

});

來源

2011-07-28 14:37:24 martincarlin87

這是比較基本的事情。正如其他人所建議的，我建議使用第三方JavaScript庫，如jQuery或PrototypeJs。

如果你選擇的jQuery，下面的頁面應該幫助你：http://api.jquery.com/show/，和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。真的值得去了解他們！

來源

2011-07-28 14:40:08 jamesmhaley

首先，你是什麼意思動態？你必須在某處編碼關係。

您的自定義屬性添加到您的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>

然後，你可以有一個會把你點擊按鈕的id一個onclick事件，顯示所有div其中linktoButton =「按鈕 - 1' 和隱藏的其餘部分。

您可以使用‘具有屬性’選擇在jQuery的 http://api.jquery.com/has-attribute-selector/

請記住，這樣將不得不通過DOM中的每個元素走路，可能會很慢。您可能希望有一個容器div，您可以通過ID獲取，並只使用子項中的屬性選擇器。

希望這點能讓你朝着正確的方向前進，並且記住，有100種方法可以爲這隻貓蒙皮。

來源

2011-07-28 14:41:11

動態隱藏和顯示div

回答

相關問題