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时，没有正确地渲染它们，当它们被显示时，它们看起来很难看。正确地做到这一点的方法是什么？

EDIT ::::::::::::::::::::::::::::::::::::::::::::::

我最终做的是将所有最初隐藏的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都会对浏览器行为产生影响。

两者的另一种解决方法是将要隐藏的div的opacity设置为0。这总是在我的经验中有效，但不那么优雅。

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

hidden

您可以使用jQuery <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>和addClass方法使div可见且不可见，例如：removeClass和$("#id1").removeClass("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');

});

希望如果您仍然有渲染问题，那么maby尝试

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

Answer 4

我喜欢这样做：
的javascript：

$('#btn2').click(function(){
    $('#id1').addClass('hidden');
    $('#id3').addClass('hidden');
    $('#id2').removeClass('hidden');
});

的CSS：

.hidden {
    display: none;
}

HTML：

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

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

Answer 5

也许.toggle可以帮助你实现这个目标吗？

$("#btn2").click(function (e) { 
    $("#id1").toggle(); 
    $("#id2").toggle();
    $("#id3").toggle();
});

Answer 6

window.onload = pre_loader;

function pre_loader() {

    javascript:document.getElementById('loader').style.visibility='hidden';

    javascript:document.getElementById('loader').style.opacity=0;

}

最初隐藏div以供以后显示

6 个答案: