javascript - 页面加载准备就绪时加载选项卡中的内容

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 将负责使正确的选项卡可见。