當div div進場時按下div？

Question

我收到了一組單選按鈕，它們與一組隱藏的div相連接。 onClick與JavaScript他們應該被激活，並顯示一個由單選按鈕的div內容選擇，我想這個div在一個頁面上的特定位置的地方，並推下來的東西下面的底部？

我想給喜歡我的div屬性：溢出：隱藏; - 但由於某種原因，它對我不起作用？

Answer 1

你沒有張貼代碼，所以我在這裏使用通用的示例代碼。

的HTML：

<input type='radio' name='exampleRadio' id='firstRadio'> First 
<input type='radio' name='exampleRadio' id='secondRadio'> Second 
<input type='radio' name='exampleRadio' id='thirdRadio' checked> None 

<div id='firstHiddenDiv'>Content Here</div> 
<div id='secondHiddenDiv'>More Content Here</div> 

<div>Content to be pushed down here</div> 

的CSS：

#firstHiddenDiv, #secondHiddenDiv { display:none; } 

jQuery的：

$(document).ready(function() { 
    $("#firstRadio").click(function() { 
    $("#secondHiddenDiv").hide("slow"); 
    $("#firstHiddenDiv").show("slow"); 
    }); 
    $("#secondRadio").click(function() { 
    $("#firstHiddenDiv").hide("slow"); 
    $("#secondHiddenDiv").show("slow"); 
    }); 
    $("#thirdRadio").click(function() { 
    $("#firstHiddenDiv, #secondHiddenDiv").hide("slow"); 
    }); 
}); 

的fiddle。

的解釋：

一旦頁面加載，jQuery的設置在單選按鈕事件監聽器。點擊後，它會使用hide()刪除應該隱藏的div。它使用show()來顯示正確的div。使用show("slow")提供動畫效果。如果您希望效果立即生效，您可以刪除"slow"。

Answer 2

此使用純javascript切換一個元素能見度的一個實施例。你也可以在像jQuery這樣的庫的幾行內做到這一點。

HTML：

<button id="btn">Click Me</button> 
<div id="hiddenRadio"> 
<input type="radio" name=radiobtn1 value="1" >one 
<input type="radio" name=radiobtn2 value="2" checked>two 
</div> 

的Javascript：

var radioDiv = document.getElementById('hiddenRadio'); 
radioDiv.style.display='none'; 

document.getElementById('btn').addEventListener('click', function() { 
    //If you only want to display not to 
    // Toggle then : radioDiv.style.display='block'; 
    if(radioDiv.style.display != 'block') { 
return radioDiv.style.display='block'; 
    } 
    radioDiv.style.display = 'none'; 

});