Question

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

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

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

知道为什么会这样吗？我是否需要按特定顺序加载.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

这是正常的，但不应该花几秒钟。在致电$()之前，您在jQuery ready（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>

在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

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

tabs()

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

Answer 9

问题是来自jquery-ui的css是针对jquery-ui脚本在加载页面时添加到DOM的类。而不是在HTML中添加ui-tabs（如gregmac所建议），您只需将相同的display规则添加到CSS即可应用于导航栏ID。当jqueryui将类添加到ul和列表项时，jqueryui CSS将接管。

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

#navbarID li {
    display: inline;
}

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

9 个答案: