我的网页如下:
<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秒。
尝试使用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");
。
为什么不使用jQuery show
和hide
?
使用CSS隐藏页面加载时要隐藏的元素(duh):
#id1, #id2, .. {
display: none;
}
或者您可以使用Javascript隐藏它:
$('#id1, #id2, ..').hide();
使用以下方式显示或隐藏它们:
$('#btn2').click(function() {
$('#id1, #id3').hide();
$('#id2').show();
});
最好不要在你的标记中添加显示逻辑,这样做会有更好的方法
.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;}
我喜欢这样做: 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>
也许.toggle可以帮你实现这个目标吗?
$("#btn2").click(function (e) {
$("#id1").toggle();
$("#id2").toggle();
$("#id3").toggle();
});
window.onload = pre_loader;
function pre_loader() {
javascript:document.getElementById('loader').style.visibility='hidden';
javascript:document.getElementById('loader').style.opacity=0;
}