Question

我页面上的第一个标签包含很多内容，包括文字和图片。

这可能会导致视觉问题：

一旦用户加载页面，他会看到常规的html列表，而不是带有背景的样式标签。

这样的事情：

Tab One
Tab Two
Tab Three

所有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 UI选项卡可以通过AJAX加载其他内容。

替代方案首先隐藏内容，然后通过jQuery显示它。

Answer 2

用户看到常规列表的第二个是jQuery和tabs插件需要初始化自己所需的时间。那段时间你将无法做很多事情。

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

打开浏览器窗口并等待标签正确显示。现在打开开发人员工具，找出<ul> / <li> / <div>元素的标签扩展分配了哪些CSS类。

在基本HTML中分配这些类。完成。

Answer 3

试一试：

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

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

3 个答案: