最初隐藏一个div以供以后显示 [英] Initially hiding a div for later display

问题描述

我的网页如下：

 < div id =id1class =stuff> 
 TEXT，FORMS和STUFF 
< / div> 
 
< div id =id2class =stuffstyle =display：none> 
 TEXT，FORMS和STUFF 
< / div> 
 
< div id =id3class =stuffstyle =display：none> 
 TEXT，FORMS和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'）; 
 $（＃id2）。 （'display'，'inherit'）; 
}）; 
  

显示和隐藏工作正常，但我注意到，最初隐藏的div中的一些东西不呈现正确，特别是CSS操作的元素。基本上当页面加载隐藏的div不正确地被呈现，当他们被显示的东西看起来丑陋。正确执行此操作的方法是什么？

::::::::::::::::::::::::: :::::::::::::::::::::

我最后做的是将所有最初隐藏的div设置为visibility：none，然后在onLoad（）事件页面中设置display：none。当我切换我改变了可见性和显示。一切正常，并且因为事情被静态地设置为不可见，没有丑2秒，其中所有的div显示。

解决方案

改用 visibility 。示例：

  $（＃id2）。click（function（e）{
 $（＃id1 ）; css（'visibility'，'hidden'）; 
 $（＃id2）。 （'visibility'，'visible'）; 
}）; 
  

两个显示和 visibility 可以影响浏览器的行为。

另一种解决方法是设置 opacity 您想要隐藏的

0 。

---

更新回复评论：在这种情况下，您可以设置其他属性，如 width 和 height 到 0px 和溢出到 hidden ，以使div不占用屏幕上的任何空间。丑陋，但基本，工作。

 < style> 
 .hidden {
 visibility：hidden; 
 over-flow：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 code> removeClass 方法使div可见和不可见，例如： $（＃id1）removeClass（hidden）; 和 $（＃id3）。addClass（hidden）; 。

My web page is like the following:

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

Under this I have jQuery click events which set the display of the clicked item to inherit and the others to none.

$("#btn2").click(function (e) {
    $("#id1").css('display','none');
    $("#id3").css('display','none');
    $("#id2").css('display','inherit');
});

The showing and hiding works correctly however I do notice that some things in the initially hidden divs do not render correctly, especially the elements that get manipulated by CSS. Essentially when the page loads the hidden divs do not correctly get rendered and when they are shown things look ugly. What is the way to properly do this?

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

What I ended up doing is setting all of the initially hidden divs to "visibility: none", then in the pages onLoad() event setting the display: none. When I toggle I change both the visibility and display. Everything renders correctly and because things are statically set to not visible there is no ugly 2 seconds where all the divs show.

解决方案

Try using visibility instead. Example:

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

Both display and visibility can have an effect on browser behavior.

An alternative work-around to both is to set the opacity of the divs you want to hide to 0. That always works in my experience but is less elegant.

---

Update in reply to comment: In that case, you can set other properties like the width and height to 0px and the over-flow to hidden so that the divs don't occupy any space on screen. Ugly, but basic, and works.

<style>
.hidden {
    visibility: hidden;
    over-flow: 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>

You can use the jQuery addClass and removeClass methods to make the divs visible and invisible, e.g.: $("#id1").removeClass("hidden"); and $("#id3").addClass("hidden");.

这篇关于最初隐藏一个div以供以后显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！