JQuery 选项卡 - 页面内容加载的样式问题
我页面上的第一个选项卡有很多内容，包括文字和图片。
这可能会导致视觉问题：
用户加载页面后，有一秒钟，他将看到常规的 html 列表，而不是带有背景的样式选项卡。
像这样：
- 选项卡一
- 选项卡二
- 选项卡三
所有 javascript 和 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>
First tab on my page has a lot of content, including text and pictures.
This probably causes visual issue:
Once user loads the page, for a second, he will see regular html list instead of styled tabs with background.
Something like this:
- Tab One
- Tab Two
- Tab Three
All javascripts and css are loaded on top of the page in head section.
Does anyone know any solution to this issue?
Thanks in advance!
<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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
不要一次加载所有内容。 jQuery UI 选项卡能够通过 AJAX 加载附加内容。
或者先隐藏内容，然后通过 jQuery 显示它。
Don't load all the content at once. The jQuery UI tabs have the capability of loading additional content by AJAX.
Alternative hide the content first, and display it by jQuery later.
用户看到常规列表的第二个时间是 jQuery 和选项卡插件需要初始化自身的时间。在那段时间你将无能为力。
不过，您可以自行设计
元素的样式，使它们从一开始就看起来不错。打开浏览器窗口并等待选项卡正确显示。现在打开开发人员工具并找出选项卡扩展将哪些 CSS 类分配给
//直接在基本 HTML 中分配这些类。完毕。
The second the user sees a regular list is the amount of time jQuery and the tabs plugin need to initialize themselves. You will not be able to do much about that time.
However, you can style the
<li>elements yourself in a way that makes them look good right from the start.Open a browser window and wait until the tabs appear correctly. Now open developer tools and find out which CSS classes are assigned by the tabs extension to the
<ul>/<li>/<div>elements.Assign these classes right in the base HTML. Done.
尝试一下：
Try it: