当隐藏的div来玩时,按下div?

时间:2014-01-17 21:23:43

标签: javascript css html

我有一组单选按钮,它们与一组隐藏的div连接。 onClick与javascript他们应该被激活,并通过单选按钮div内容显示一个选择,我希望这个div放在页面上的特定位置,并将所有内容向下推到底部?

我试图给我的div属性如:overflow:hidden; - 但由于某些原因它对我不起作用?

2 个答案:

答案 0 :(得分: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"

答案 1 :(得分:0)

这是使用纯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';

});