javascript - 当隐藏的 div 开始播放时按下 div？

Question

我有一组单选按钮，它们与一组隐藏的 div 相关联。使用 javascript 的 onClick 它们应该被激活并显示由单选按钮选择的 div 内容，我希望这个 div 放置在页面上的特定位置并将所有内容向下推到底部？

我试着给我的 div 属性，比如:overflow: hidden; - 但出于某种原因它对我不起作用？

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"。