页面加载准备好时在选项卡中加载内容答案

【问题标题】：Load content in tabs when page loading is ready页面加载准备好时在选项卡中加载内容
【发布时间】：2012-03-07 09:35:25
【问题描述】：

我有一个带有一些标签的页面。每个选项卡中都有内容。在加载页面时，所有内容都显示在另一个之下。当页面完全加载后，内容将分别放入选项卡中。当页面完全加载并且在加载时不显示在主页上时，我想在选项卡中显示内容。页面100%加载后，TAB切换完美运行

请在下面找到标签的代码：

<div id="tabs" class="tabset-holder">
          <ul class="tabset">
            <li><a href="#overview" class="tab active"><span>Overview</span></a></li>
            <li><a href="#features" class="tab"><span>Features</span></a></li>
            <li><a href="#screenshots" class="tab"><span>Screenshots</span></a></li>
            <li><a href="#video" class="tab"><span>Video</span></a></li>             
          </ul>
        </div>

例如，如果单击屏幕截图，则会显示以下 div：

<div class="tab-content" id="screenshots">
   <p>TEST</p>               
</div>

【问题讨论】：

你可以从 twitter 看一下这个框架：twitter.github.com/bootstrap 这让这些事情变得更容易了。

标签： javascript jquery jquery-ui

【解决方案1】：

将以下 CSS 样式添加到您的页面以使 tab-content div 在页面加载时隐藏。

.tab-content {
    display: none;
}

然后，一旦页面准备就绪，jQueryUI 将负责使正确的选项卡可见。

【讨论】：

很好的答案，不知道。
不工作：/内容被隐藏，但是当我点击一个标签时，内容没有显示。

【解决方案2】：

使用 css (display:none) 隐藏容器，

然后在jQuery-ui标签的标签加载事件上显示容器：

$( ".selector" ).tabs({
    load: function(event, ui) { 
        $('#container').show();
  }
});

【讨论】：

【解决方案3】：

在用户第一次单击未显示的选项卡并从服务器端页面获取其内容时使用 ajax 调用。看看

$.ajax()

JQuery 文档上的函数

【讨论】：