Question

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

Answer 1

在页面中添加以下CSS样式，以便在页面加载时隐藏tab-content div。

.tab-content {
    display: none;
}

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

Answer 2

使用css（display:none），

隐藏容器

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

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

Answer 3

在用户第一次点击时，使用ajax调用未显示标签并从服务器端页面获取其内容。看看

$.ajax()

在JQuery doc上运行

页面加载准备就绪时，在选项卡中加载内容

3 个答案: