23

我的网页如下所示：

<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() 事件中设置显示：无。当我切换时，我会同时更改可见性和显示。一切都正确渲染，并且由于事物被静态设置为不可见，因此所有 div 都不会显示丑陋的 2 秒。

4

6 回答 6

15

尝试visibility改用。例子：

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

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

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

更新回复评论：在这种情况下，您可以设置其他属性，例如widthand heightto0px和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>

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

于 2012-07-20T21:29:18.763 回答
6

为什么不使用 jQueryshow和hide?

使用 CSS 隐藏页面加载时要隐藏的元素（duh）：

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

或者你可以用 Javacript 隐藏它：

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

使用以下命令显示或隐藏它们：

$('#btn2').click(function() {
    $('#id1, #id3').hide();
    $('#id2').show();
});
于 2012-07-20T21:35:15.380 回答
5

最好不要将显示逻辑添加到您的标记中，这样做的更好方法是

.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;}
于 2012-07-20T21:32:16.720 回答
1

我喜欢这样做：
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>
于 2012-07-20T21:35:40.977 回答
1

也许 .toggle 可以帮助您实现这一目标？

$("#btn2").click(function (e) { 
    $("#id1").toggle(); 
    $("#id2").toggle();
    $("#id3").toggle();
});
于 2012-07-20T21:39:01.633 回答
0 
window.onload = pre_loader;

function pre_loader() {

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

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

}
于 2015-06-24T10:06:35.953 回答