最初隐藏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设置为"visibility:none",然后在onLoad()事件中设置display:none.当我切换时,我改变了可见性和显示.一切都正确渲染,因为静态设置不可见,所有div显示的都没有丑陋的2秒.

Answer 1

请尝试使用visibility.例:

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

双方display并visibility可以对浏览器的行为产生影响.

另一种解决方法是设置opacity要隐藏的div 0.这总是适用于我的经验,但不太优雅.

更新回复评论:在这种情况下,您可以设置其他属性,如width和height,0px以及over-flowto,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");.

Answer 2

为什么不使用jQuery show和hide？

使用CSS隐藏页面加载时要隐藏的元素(duh):

#id1, #id2, .. {
    display: none;
} 

或者你可以用Javacript隐藏它:

$('#id1, #id2, ..').hide();

使用以下方式显示或隐藏它们:

$('#btn2').click(function() {
    $('#id1, #id3').hide();
    $('#id2').show();
});

Answer 3

最好不要在标记中添加显示逻辑，更好的方法是

.hidden{ display:none;}

.

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

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

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

.

$(".stuff").click(function () {
    $(".stuff").addClass('hidden');
    $(this).removeClass('hidden');

});

如果您仍然遇到渲染问题，希望这会有所帮助，然后再尝试

.hidden{ visibility:hidden; }
.stuff{display:block;}