jQuery UI的选项卡首次负荷为 then as tabs

Question

我使用jQuery UI和一系列的页面标签控件。这似乎是，加载页面时，标签最初加载一个简单的列表，然后他们跳转到标签栏。

当我最初加载页面我得到这个：

然后，几秒钟后，切换到这种（方式是应该是）：

任何想法，为什么发生这种情况？我需要加载的.js和/或.css文件以特定的顺序？或者，有没有办法隐藏的初步名单，仅显示标签一旦被“装”？

Answer 1

这是因为你调用$（ '＃ID'）。在标签的document.ready（）（），当DOM准备好进行遍历[1]恰好。这通常意味着页面已经呈现，所以<ul>是页面不应用任何选项卡专用的造型经常<ul>上可见。

这不是超级“干净”的，但我用它来解决这个问题的方式是将ui-tabs类添加到HTML中<ul>，这会导致它得到立即应用CSS样式。缺点是，你没有行为和代码的100％完全分离，但好处是它看起来不错。

Answer 2

像其他人说，这是因为直到文档已加载的jQuery不呈现UL为选项卡。我直到他们只需加载隐藏的标签解决此问题得到。这样，你摆脱闪烁。例如：

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

Answer 3

这是正常的，但它不应该花几秒钟。多少钱，你在你的jQuery就绪（AKA $()）函数进行调用$("#whatever").tabs()过吗？尝试方法调用移动到你的准备函数的顶部。

Answer 4

嘿，我不知道这是否是正确的做法，但我用下面的技巧。 （我尝试过其他的答案，他们不是为我工作）。

首先，我只是用下面的锚标记代码：

<div id="tabs">
    <ul >
        <li style="list-style-image: none !important; list-style-type: none"><a href="#tabs-1" id="link1" ></a></li>
        <li style="list-style-image: none !important; list-style-type: none"><a href="#tabs-2" id="link2" ></a></li>
    </ul>
</div>

在文档准备功能我写了下面的（jQuery的）代码名称中使用锚标记：

$("#link1").text('Current');
$("#link2").text('Archived');  

Answer 5

默认隐藏的主要div：

<div id="tabs" style="display: none;">

然后在文件在您的脚本是结束，只是删除样式：

<script>
    $("#tabs").removeAttr('style');
    $("#tabs").tabs();   
</script>

Answer 6

为我工作的解决方案是设置display样式属性none为包含选项卡，然后调用div方法后show()方法tabs()元素。

<script>
  $( function() {
    $( "#tabs" ).tabs();
    $( "#tabs" ).show();
  } );
</script>

<div class="tabbody" id="tabs" style="display: none;">
    <!-- tab html -->
</div>

Answer 7

我有同样的问题。我在那里所定义的标签页面已经错过导入jQuery的UI CSS。

HTML代码：

 <div id="tabs">
    <ul>
        <li>
             <a href="connectionDetailsTab1.html?name=<%=  jmsConnectionName %>">Summary</a>

         </li>
    </ul>
 </div> 

锚的href有进口的jQuery UI的CSS，因为它的标签被正确地显示出来，标签获取加载后。但是，在此之前，它是显示没有标签的特定样式的UL。修复是导入上述HTML的jQuery的UI CSS了。 jQuery的UI版本中使用：1.10.2

Answer 8

我使用jQuery UI选项卡大获成功。下面是一些代码我使用：

<div id="tabs">
    <ul>
        <li><a href="">
            <span>Applicant</span></a></li>
        <li><a href="">
            <span>Insured</span></a></li>
        <li><a href="">
            <span>Beneficiary</span></a></li>
        <li><a href="">
            <span>Billing</span></a></li>
        <li><a href="">
            <span>Summary</span></a></li>
    </ul>
</div>
<script type="text/javascript">

    $(function() {
        $tabs = $("#tabs").tabs({
            disabled: [1, 2, 3, 4],
            event: null,
            load: function(event, ui) {
                handleload(ui);
            },
            selected: 0
        });
    });

</script>

至于为了我始终将jQuery的ui.css第一，其次是jquery.min.js和jQuery-ui.min.js。我使用的是最新的版本（1.3.2的jQuery和jQuery 1.7.2）从谷歌CDN服务的全部。

Answer 9

问题是，从jQuery的UI的CSS是，当页面加载了jQuery UI的脚本添加到DOM的类。而不是将用户界面的选项卡的HTML（由gregmac所建议的），你可以简单地添加相同display规则，以你的CSS应用到你的导航栏的ID。当jQueryUI的添加类的ul和列表项，jQueryUI的CSS接管。

所以这个规则添加到你的CSS：

#navbarID li {
    display: inline;
}