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

Question

我在一系列页面上使用 jQuery UI 和选项卡控件。 看起来，在加载页面时，选项卡最初作为简单列表加载，然后跳转到选项卡。

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

然后，几秒钟后它切换到这个（应该是这样）：

知道为什么会这样吗？我需要按特定顺序加载 .js 和/或 .css 文件吗？或者，有没有办法隐藏初始列表并仅在“加载”后显示选项卡？

Answer 1

发生这种情况是因为您在 document.ready() 中调用了 $('#id').tabs()，这发生在 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

这很正常，但不会花几秒钟的时间。在调用 $("#whatever").tabs() 之前，您在 jQuery 就绪 (AKA $()) 函数中做了多少工作？尝试将该方法调用移动到您的就绪函数的顶部。

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>

在 Document ready 函数中，我编写了以下 (jQuery) 代码来命名 Anchor 标签：

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

Answer 5

默认隐藏主div：

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

然后在您的脚本所在的文档末尾，删除样式：

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

Answer 6

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

<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。我使用的是 Google CDN 提供的最新版本（jQuery 1.3.2 和 jQuery 1.7.2）。

Answer 9

问题是来自 jquery-ui 的 css 是用于页面加载时 jquery-ui 脚本添加到 DOM 的类。与其将 ui-tabs 添加到 HTML（如 gregmac 建议的那样），您可以简单地将相同的 display 规则添加到您的 CSS 以应用于您的导航栏 ID。当 jqueryui 将类添加到 ul 和列表项时，jqueryui CSS 会接管。

所以将此规则添加到您的 css 中：

#navbarID li {
    display: inline;
}