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

我有一组单选按钮，它们与一组隐藏的div连接在一起。使用javascript的onClick应当激活它们并显示通过单选按钮div内容选择的内容，我希望将此div放置在页面上的特定位置并将所有下面的内容下推至底部？

我试图给我的div属性，例如： -但这出于某种原因对我不起作用？

最佳答案

您没有发布代码，所以我在这里使用通用示例代码。

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