题 最初隐藏div以供以后显示


我的网页如下:

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


15
2017-07-20 21:25


起源


你如何点击未显示的内容? - ᾠῗᵲᄐᶌ
我认为你必须更具体一点,“丑陋”并没有真正告诉我们问题是什么,通常这应该工作得很好,但只是做 $("#id1, #id3").hide(); 看起来更简单?我猜你有一个函数用于每个元素,并且这个例子只是用隐藏元素上的click事件写得不好,否则我倾向于同意上面的注释,如何点击隐藏元素? - adeneo
抱歉。我打错了。有三个按钮。隐藏div中的元素无法正确呈现。当我在内部取消隐藏所有的div时,一切都是正确的。 - user974896


答案:


尝试使用 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-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");


10
2017-07-20 21:29



我不能使用可见性,因为div在技术上仍然存在。 id1和id2占用的空间仍然偏移id3,即使它是不可见的。通过可见性,解决了渲染问题。显示:none避免这种情况,但有渲染问题。 - user974896
@ user974896 - 在这种情况下,设置 width, height 和 over-flow 属性也是如上例所示。 - Oliver Moran


为什么不使用jQuery show 和 hide

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

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

或者你可以用Javacript隐藏它:

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

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

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

5
2017-07-20 21:35



切换不是问题。它最初隐藏了div并且一旦显示就让所有内容都正确呈现。 - user974896
隐藏和显示只不过是在元素上设置CSS属性的函数。它完成了几行的工作。 - Sven van Zoelen
我理解,但仍然无法解决原始问题。我最初如何隐藏div?记住,其中有2个是蝙蝠隐藏的。 - user974896
更新了答案 - Sven van Zoelen
好,易于!谢谢。 - Ahmad Mobaraki


最好不要在你的标记中添加显示逻辑,这样做会更好

.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;}

3
2017-07-20 21:32



为什么它更好,究竟是什么使它与OP的代码不同。除了使用类来改变CSS之外,它仍然完全相同? - adeneo
另外还要了解渲染的最佳做法,不要将标记与标记混合。 - Dominic Green
一切都在CSS中。我在这里输入它作为一个例子,因为我不想在这里转储我的网站。我放在这里基本上是我想要做的。 - user974896


我喜欢这样做:
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>

1
2017-07-20 21:35



class =“hidden”div中的静态隐藏的div(set class =“hidden”)在切换时不会正确加载所有元素。 - user974896


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

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

1
2017-07-20 21:39



切换工作但我最初如何隐藏div以便正确加载它们。 - user974896
@ user974896 $(document).ready(function(){$(“#id1”)。hide(); $(“#id2”)。hide(); $(“#id3”)。hide();} ); - Dom
难道所有的div都不会在页面底部加载JS之前的几秒内简要显示吗?我在我的onLoad事件中为身体提供了相同的逻辑(尽管我正在切换display = none)。所有的div都显示了一两秒。我在编辑中的解决方案(以visibility none开头)解决了这个问题。 - user974896
@ user974896可以使用z-index css样式 - 将其设置为页面后面,然后使用单击功能切换命令,在切换命令之前将css z-index更改为可见状态。 - Dom


window.onload = pre_loader;

function pre_loader() {

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

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

}

0
2018-06-24 10:06



请提供一个解释,说明这个答案如何优于OP中的答案 - gareththegeek