Javascript 最初隐藏一个 div 以供以后显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11587141/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Initially hiding a div for later display
提问by user974896
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.
在此之下，我有 jQuery 单击事件，这些事件将被单击项目的显示设置为继承，其他设置为无。
$("#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?
显示和隐藏工作正常，但是我注意到最初隐藏的 div 中的某些内容无法正确呈现，尤其是由 CSS 操作的元素。本质上，当页面加载时，隐藏的 div 没有正确呈现，当它们显示时，事情看起来很丑陋。正确执行此操作的方法是什么？
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.
我最终做的是将所有最初隐藏的 div 设置为“可见性：无”，然后在页面 onLoad() 事件中设置显示：无。当我切换时，我会同时更改可见性和显示。一切都正确呈现，并且由于事物静态设置为不可见，因此所有 div 都不会显示丑陋的 2 秒。
采纳答案by Oliver Moran
Try using visibilityinstead. Example:
尝试使用visibility。例子：
$("#id2").click(function (e) {
$("#id1").css('visibility','hidden');
$("#id3").css('visibility','hidden');
$("#id2").css('visibility','visible');
});
Both displayand visibilitycan have an effect on browser behavior.
双方display并visibility可以对浏览器的行为产生影响。
An alternative work-around to both is to set the opacityof the divs you want to hide to 0. That always works in my experience but is less elegant.
两者的替代解决方法是将opacity要隐藏的 div设置为0。这在我的经验中总是有效，但不太优雅。
Update in reply to comment:In that case, you can set other properties like the widthand heightto 0pxand the over-flowto hiddenso that the divs don't occupy any space on screen. Ugly, but basic, and works.
更新回复评论：在这种情况下，您可以设置其他属性，例如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>
You can use the jQuery addClassand removeClassmethods to make the divs visible and invisible, e.g.: $("#id1").removeClass("hidden");and $("#id3").addClass("hidden");.
您可以使用 jQueryaddClass和removeClass方法使 div 可见和不可见，例如：$("#id1").removeClass("hidden");和$("#id3").addClass("hidden");。
回答by Sven van Zoelen
Why not use jQuery showand hide?
为什么不使用 jQueryshow和hide?
Hide the elements you want to hide (duh) on page load with CSS:
使用 CSS 在页面加载时隐藏要隐藏的元素（废话）：
#id1, #id2, .. {
display: none;
}
Or you can hide it with Javacript:
或者你可以用 Javacript 隐藏它：
$('#id1, #id2, ..').hide();
Show or hide them by using:
使用以下方法显示或隐藏它们：
$('#btn2').click(function() {
$('#id1, #id3').hide();
$('#id2').show();
});
回答by Dominic Green
Its best not to add display logic into your mark up a better way to do this would be
最好不要在标记中添加显示逻辑，更好的方法是
.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');
});
Hope that helps if your still having rendering issues then maby try
如果您仍然遇到渲染问题，希望这会有所帮助，然后再尝试
.hidden{ visibility:hidden; }
.stuff{display:block;}
回答by Aust
I like to do it like this:
javascript:
我喜欢这样做：
javascript：
$('#btn2').click(function(){
$('#id1').addClass('hidden');
$('#id3').addClass('hidden');
$('#id2').removeClass('hidden');
});
css:
css：
.hidden {
display: none;
}
html:
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>
回答by Dom
Maybe .toggle can help you achieve this?
也许 .toggle 可以帮助您实现这一目标？
$("#btn2").click(function (e) {
$("#id1").toggle();
$("#id2").toggle();
$("#id3").toggle();
});
回答by Dom
window.onload = pre_loader;
function pre_loader() {
javascript:document.getElementById('loader').style.visibility='hidden';
javascript:document.getElementById('loader').style.opacity=0;
}
