在页面加载准备就绪时在标签中加载内容

我有一个包含一些选项卡的页面。在每个标签中都有内容。在加载页面时，所有内容都显示在一个之下。当页面完全加载时，内容分别放入标签中。我希望在页面加载完成时显示标签中的内容，并且在加载时不在主页上显示。页面被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>

来源

2012-03-07 Rene Zammit

你可以看看来自twitter的框架：http：//twitter.github.com/bootstrap/这使得整体更容易。 – steveoh 2012-03-07 09:40:55

-1

第一次用户点击时没有显示标签并从服务器端页面获取他们的内容时使用ajax调用。只看JQuery的文档

$.ajax()

功能

来源

2012-03-07 09:38:28

我该怎么做？ – 2012-03-07 09:39:01

使用CSS（display:none）隐藏容器，

然后显示该容器，在jQuery的UI选项卡的选项卡加载事件：

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

来源

2012-03-07 09:39:17 Headshota

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

.tab-content { 
    display: none; 
}

然后，jQueryUI将负责在页面准备好后使正确的选项卡可见。

来源

2012-03-07 09:39:31

很好的答案，不知道。 – Headshota 2012-03-07 09:41:23

不工作：/正在隐藏内容，但是当我点击一个标签时，内容不显示。 – 2012-03-07 10:34:37

在页面加载准备就绪时在标签中加载内容

回答

相关问题