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

我的页面上的第一个选项卡包含很多内容，包括文本和图片。JQuery选项卡 - 页面内容加载时的样式问题

这可能会导致视力问题：

一旦用户加载页面，一秒钟，他会看到普通的HTML列表，而不是与背景的风格标签。

事情是这样的：

标签中选择一个
标签两个
标签三个

所有的JavaScript和CSS加载在头部分页面顶部。

有没有人知道这个问题的任何解决方案？

在此先感谢！

<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>

来源

2010-05-03 Kelvin

粘贴JS使用以及请。 – XGreen 2010-05-03 19:12:46

你有没有在你的CSS中设置你的ul有list-style-type：none; ？ – XGreen 2010-05-03 19:13:20

如果你有很多专门用ajax加载的html，除了试着去设计类似于js完成工作后的样子的样式之外，你不会有太多的选择。它总是最好先把css放在后面，然后链接脚本。无论你做什么，都不要用CSS隐藏事情，并让它们以JS出现，除非你确定没有任何残疾人会查看你的页面。或者你不想支持没有js的人 – XGreen 2010-05-03 19:17:29

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

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

打开浏览器窗口并等待选项卡正确显示。现在打开开发人员工具，并找出哪些CSS类别由选项卡扩展名分配给<ul>/<li>/<div>元素。

在基础HTML中正确指定这些类。完成。

来源

2010-05-03 19:18:17 Tomalak

请勿一次加载所有内容。 jQuery UI标签可以通过AJAX加载额外的内容。

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

来源

2010-05-03 19:25:02

感谢您对Christian的评论。这个想法不是使用AJAX来加载内容，而是一次加载。否则你的建议也会起作用。 – Kelvin 2010-05-03 19:43:27

试试：

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

来源

2012-09-24 09:53:17 RDK

不要只是发布代码作为答案。试着给出一些解释。 – 2012-09-24 12:42:27

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

回答

相关问题