javascript - HTML 选项卡未预加载

Question

我对选项卡式内容有疑问。我下载了一个非常漂亮的 HTML/CSS/Javascript 内容标签。

问题是，当页面加载时，它会同时显示所有内容。只有完成加载后，它才会将其放入选项卡中。

有谁知道它为什么会这样做？我正在考虑与JS有关的事情，不幸的是我对JS一无所知。

如果需要，我可以发布 JS 代码。

谢谢！

Answer 1

这样做的原因是您的 HTML（文档）在应用 JS 之前首先加载。因此，您将首先看到所有 HTML 内容。

解决此问题的一种解决方案是最初通过 CSS 隐藏内容，然后在 JS 将内容转换为选项卡式内容后显示它。

一个基本的例子可以在这里找到http://jsfiddle.net/86pzN/

$(function(){
    setTimeout(function(){
        $( "#tabs" ).tabs();  
        $('#tabs-2,#tabs-3').show();
    }, 3000);
});

一些选项卡可以通过 css 隐藏，然后在应用选项卡功能后显示。

ps我在setTimeout这里添加了代码来模拟在运行 JS 代码之前缓慢加载 HTML 的页面。