jQuery UI选项卡首先加载为<ul>然后作为选项卡加载

Question

我正在使用jQuery UI和一系列页面上的选项卡控件.看起来,在加载页面时,标签最初作为简单列表加载,然后它们跳转到标签页.

当我最初加载页面时,我得到了这个:

然后,几秒钟后它切换到这个(应该是这样的方式):

知道为什么会这样吗？我是否需要按特定顺序加载.js和/或.css文件？或者,有没有办法隐藏初始列表,只有在"加载"后才显示标签？

Answer 1

发生这种情况是因为你在document.ready()中调用$('#id').tabs(),这在DOM准备好被遍历时发生^{[ 1 ]}.这通常意味着页面已经渲染,因此<ul>在页面上可以看到它作为常规页面,<ul>而不应用任何特定于选项卡的样式.

它不是超级"干净",但我用来解决这个问题的方法是将ui-tabs类添加到<ul>HTML中,这会导致它立即应用CSS样式.缺点是你没有100%清晰的行为和代码分离,但好处是好看.

Answer 2

就像其他人所说的那样,这是因为UL在文档加载之前,jQuery不会呈现as选项卡.我通过简单地隐藏标签直到它们被加载来解决这个问题.这样你摆脱了闪烁.例如:

<ul id="tabs" style="display: none;">
...
$(document).ready(function(){
  $('#tabs').tabs();
  $('#tabs').attr('display', 'block');
});