JQuery选项卡-页面内容加载上的样式问题

Question

我页面上的第一个选项卡有很多内容，包括文本和图片。

这可能会导致视觉问题：

一旦用户加载页面，第二次，他将看到普通的html列表，而不是带有背景样式的选项卡。

就像这样：

• Tab 1
• Tab 2
• Tab 3

所有javascripts和css都加载在head部分的页面顶部。

有人知道这个问题的解决办法吗？

提前感谢！

<script src="/js/jquery.ui/jquery-1.3.2.js" type="text/javascript"></script>
<link rel="stylesheet" href="/css/ui.tabs.css" type="text/css">

<script src="/js/jquery.ui/ui/ui.core.js" type="text/javascript"></script>
<script src="/js/jquery.ui/ui/ui.tabs.js" type="text/javascript"></script>

        <div id="container-1">
            <ul>
                <li><a href="#fragment-1"><span>Tab One</span></a></li>
                <li><a href="#fragment-2"><span>Tab Two</span></a></li>
                <li><a href="#fragment-3"><span>Tab Three</span></a></li>
            </ul>
            <div id="fragment-1">

              !!!!!! A lot of html code and pictures here !!!!!!

            </div>
            <div id="fragment-2">
               some text 2
            </div>
            <div id="fragment-3">
               some text 3
            </div>

        </div>

​

Answer 1

用户看到常规列表的第二步是jQuery和选项卡插件初始化自己所需的时间。你在那个时候做不了多少事。

但是，您可以自己设计<li>元素的样式，使它们从一开始就看起来很好。

打开浏览器窗口，直到选项卡正确出现。现在打开developer工具，找出由选项卡扩展分配给<ul>/<li>/<div>元素的哪些CSS类。

在基本HTML中分配这些类。好了。

Answer 2

不要同时加载所有的内容。jQuery UI选项卡具有通过AJAX加载附加内容的能力。

另一种方法是先隐藏内容，然后由jQuery在后面显示。

Answer 3

试一试：

$(function() {
  $("#container-1").tabs();
});