javascript - 最初隐藏一个 div 以供以后显示

Question

我的网页是这样的:

<div id="id1" class="stuff">
TEXT, FORMS, and STUFF
</div>

<div id="id2" class="stuff" style="display:none">
TEXT, FORMS, and STUFF
</div>

<div id="id3" class="stuff" style="display:none">
TEXT, FORMS, and STUFF
</div>

<a id="btn1">DD</a>
<a id="btn2">DD</a>
<a id="btn3">DD</a>

在此之下，我有 jQuery 单击事件，这些事件将被单击元素的显示设置为继承，其他设置为无。

$("#btn2").click(function (e) {
    $("#id1").css('display','none');
    $("#id3").css('display','none');
    $("#id2").css('display','inherit');
});

显示和隐藏工作正常，但我确实注意到最初隐藏的 div 中的某些内容无法正确呈现，尤其是通过 CSS 操作的元素。本质上，当页面加载时，隐藏的 div 无法正确呈现，并且当它们显示时，看起来很丑陋。正确执行此操作的方法是什么？

编辑::::::::::::::::::::::::::::::::::

我最后做的是将所有最初隐藏的 div 设置为“可见性:无”，然后在页面 onLoad() 事件中设置显示:无。当我切换时，我会同时更改可见性和显示。一切都正确呈现，并且因为事物被静态设置为不可见，所以没有丑陋的 2 秒显示所有 div。

Answer 1

尝试使用 visibility 代替。示例:

$("#id2").click(function (e) {
    $("#id1").css('visibility','hidden');
    $("#id3").css('visibility','hidden');
    $("#id2").css('visibility','visible');
});

display 和 visibility 都会对浏览器行为产生影响。

两者的替代解决方法是将要隐藏的 div 的 opacity 设置为 0。根据我的经验，这总是有效，但不够优雅。

---

更新回复评论:在这种情况下，您可以将其他属性(例如 width 和 height 设置为 0px 和 over-flow 到 hidden 以便 div 不占用屏幕上的任何空间。丑陋，但基本，并且有效。

<style>
.hidden {
    visibility: hidden;
    overflow: hidden;
    width: 0px;
    height: 0px;
}
</style>

<div class="hidden"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Aster_Tataricus.JPG/245px-Aster_Tataricus.JPG"/></div>
<div class="hidden"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Chamomile%40original_size.jpg/280px-Chamomile%40original_size.jpg"/></div>
<div><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Jonquil_flowers06.jpg/320px-Jonquil_flowers06.jpg"/></div>

您可以使用 jQuery addClass 和 removeClass 方法使 div 可见和不可见，例如:$("#id1").removeClass("hidden"); 和 $("#id3").addClass("hidden");。