jQuery hide（）div直到完全加载 [英] jQuery hide() div until fully loaded

问题描述

我为我的博客使用标签式的特色帖子。如何实现 div＃latest-featured 将 hide（）然后 show / code>在内容完全加载后回来？

  $（document）.ready $ b //默认操作
 $（。tab_content）。hide（）; //隐藏所有内容
 $（ul.tabs li：first）。addClass（active）。 show（）; //激活第一个标签
 $（。tab_content：first）show（）; //显示第一个标签内容
 
 //点击事件
 $（ul.tabs li）。click（function（）{
 $（ul.tabs li）。removeClass（active）; //删除任何活动类
 $ （this）.addClass（active）; //将active类添加到选定的标签
 $（。tab_content）。hide（）; //隐藏所有标签内容
 var activeTab = $（this）.find（a）。attr（href）; //找到rel属性值来标识活动的tab + content 
 $（activeTab）.fadeIn活动内容
 return false; 
}）; 
}）; 
   
 
 
 
 HTML 
 < ul class =tabs> 
< li>< a href =＃f1>标题1< / a>< / li> 
< li>< a href =＃f2>标题2< / a>< / li> 
< / ul> 
< div id =latest-featured> 
< div id =f1class =tab_content> 
< p>标题内容1< / p> 
< p>为什么我要隐藏＃latest-featured因为..当有image @ script这里.. tab_content会折叠所有，打破我的设计< / p> 
< / div> 
< div id =f2class =tab_content> 
< p>标题内容1< / p> 
< p>为什么我要隐藏＃latest-featured因为..当有image @ script这里.. tab_content会折叠所有，打破我的设计< / p> 
< / div> 
< / div> 
  
示例我有一个div   ＃latest-featured  ，我想隐藏它，直到内容完全加载，然后在一切加载后显示回来。
 
 
 
 
解决方案
可能最好做这样的事情：
 < div id =latest-featuresstyle =display：none;>< / div> 
 
 $（function（）{
 // do work 
 $（div＃latest-featured）。show（）; 
} 
  
默认隐藏任何东西通常不是一个好主意，但这将满足您的要求。
 
I'm using tabbed featured post for my blog. How to implement the div#latest-featured will hide() then show() it back after content fully loaded?
$(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
<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-featured and I want hide it until the content is fully loaded, and then show it back after everything is loaded.

How to implement to the current code above.
解决方案
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.

                        
这篇关于jQuery hide（）div直到完全加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！