jQuery hide() div 直到完全加载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3452226/
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
jQuery hide() div until fully loaded
提问by kampit
I'm using tabbed featured post for my blog. How to implement the div#latest-featuredwill hide()then show()it back after content fully loaded?
我正在为我的博客使用标签式精选帖子。如何实施div#latest-featured会hide()那么show()它里面的内容后回满载？
$(document).ready(function() {
//Default Action
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
return false;
});
});
HTML
HTML
<ul class="tabs">
<li><a href="#f1">Title 1</a></li>
<li><a href="#f2">Title 2</a></li>
</ul>
<div id="latest-featured">
<div id="f1" class="tab_content">
<p>Content for title 1</p>
<p>Why I want to hide the #latest-featured because.. when had image @ script here.. the tab_content will collapse all and break my design</p>
</div>
<div id="f2" class="tab_content">
<p>Content for title 1</p>
<p>Why I want to hide the #latest-featured because.. when had image @ script here.. the tab_content will collapse all and break my design</p>
</div>
</div>
Example I have a div with id #latest-featuredand I want hide it until the content is fully loaded, and then show it back after everything is loaded.
示例我有一个带有 id 的 div，#latest-featured我想隐藏它直到内容完全加载，然后在加载完所有内容后将其显示回来。
How to implement to the current code above.
如何实现到上面的当前代码。
回答by hunter
Probably best to do something like this:
可能最好做这样的事情：
<div id="latest-features" style="display:none;"></div>
$(function() {
// do work
$("div#latest-featured").show();
}
Its usually not a good idea to hide anything by default but this will meet your requirement.
默认情况下隐藏任何内容通常不是一个好主意，但这将满足您的要求。
回答by Robert
If you want it to show once loaded declare the CSS display: nonefor that div, and then call $('div#latest-featured').show();in your $(document).ready function.
如果您希望它在加载后显示，请声明该display: nonediv的 CSS ，然后调用$('div#latest-featured').show();您的 $(document).ready 函数。
回答by J.B.
If you want it to show once loaded declare the CSS display: none for that div, and then call $('div#latest-featured').show();in your $(document).readyfunction.
如果您希望它在加载后显示，请声明 CSS display: none 用于该 div，然后调用$('div#latest-featured').show();您的$(document).ready函数。
Robert answered it best I would vote on it but can't yet...looked for this solution for hours and this was the best I have found...
罗伯特回答得最好，我会投票，但还不能……寻找这个解决方案几个小时，这是我找到的最好的……
回答by jcolebrand
Why not just set the div to display:none until you have loaded the data, then remove the display:none ... there's lots of ways to do what I just mentioned btw (for instance, jQuery .toggle(true) )
为什么不将 div 设置为 display:none 直到加载数据，然后删除 display:none ......有很多方法可以做我刚才提到的 btw （例如，jQuery .toggle(true) ）
