Jquery 选项卡，在 Firefox 中重新加载 jQuery HTML 后，未格式化的列表会闪烁

Question

我正在使用最新的 jQuery 选项卡，并且我的所有选项卡（以及它们上面的其他内容）都位于包含 Div 中。其中一个选项卡中有一个表单，当表单提交时，通过 AJAX 对其进行处理，然后返回的 HTML 替换整个包含的 Div。返回的 HTML 再次包含选项卡。

替换 HTML 后，我将 jQuery 功能重新绑定到列表：

$('#tabs').tabs( { fx: { opacity: 'toggle' } } );

阅读其他问题后，我在 UL 和 class="ui-tabs 上使用 class="ui-tabs" -hide" 在 LI 上，在格式化之前隐藏所有内容。

在 IE8 和 Chrome 中，这工作正常。然而，在 Firefox 中，未格式化的列表在 HTML 刷新和正在格式化的选项卡之间短暂显示（在第一次加载时也非常短暂）。

请问有什么办法可以避免这种情况吗？

Answer 1

来自 jQueryUI 文档：

...在选项卡初始化之前防止 FOUC（无样式内容的闪烁）

添加必要的类以立即将非活动选项卡面板隐藏到 HTML - 请注意 >当 JavaScript 被禁用时，这不会正常降级：

class="ui-tabs-hide" 应该出现在每个面板上，而不是选项卡列表项上。

这不一定能修复列表未样式化的问题；如果您正确实现上述内容并且仍然获得 FOUC，则应该隐藏列表的父元素，直到加载新内容并对列表进行制表。您可以使用 $().hide() 和 .show() 方法来执行此操作。

Answer 2

我刚刚遇到了类似的问题，我发现适用于选项卡式导航的另一个解决方案是将“ui-tabs-nav”类添加到选项卡导航中的

标记中，（即
)，如下所示：

<div id="tabs" class="ui-tabs">

<ul class = "ui-tabs-nav">
    <li><a href="x.html" title="ajax_content">Menu item A </a></li>
    <li><a href="x.html" title="ajax_content">Menu item B.</a></li>
    <li><a href="x.html" title="ajax_content">Menu item C</a></li>
    <li><a href="x.html" title="ajax_content">Menu item D</a></li>  

</ul>

Jquery 选项卡脚本在脚本触发时自动将“ui-tabs-nav”类添加到

中，但您可以手动将其放入 html 中，选项卡的相关 css即使加载选项卡脚本存在延迟，也会插入菜单。希望这有帮助！

Answer 3

HeyPops 使用 visibility 属性的一种变体，但在 CSS 样式表中：利用 .tabs() 初始化后添加的类，例如 .ui-tabs 类。 CSS 示例：

.tab-this { visibility: hidden; }
.tab-this.ui-tabs { visibility: visible; }

然后只需将该类 (tab-this) 添加到您进行 Tab 化的 div 以及整个网站中的任何其他选项卡式内容。

Answer 4

这似乎并不总是有效。我建议使用 Kelso.b 答案而不是 jQuery 文档解决方案。这是一个例子。

/* to hide flash styles on tabs pages - in this example customtabs is the parent element */
.customtabs {
  display: none;
}

然后稍后在 jQuery 选项卡中添加 show 方法。

$(function() {
  $( "#tabs" ).tabs({

  });
  $( ".customtabs" ).css("display","inline");
});

Answer 5

从我所看到的情况来看，此解决方法的运行更加干净，因为它还可以防止 UL 出现。将 style="visibility:hidden" 添加到包含 UL 和所有选项卡窗格的 DIV，如下所示：

<div id="tabs" style="visibility:hidden">
  <ul>
    <li><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
  </ul>
  <div>
    <div id="#tab1"></div>
    <div id="#tab2"></div>
    <div id="#tab3"></div>
  </div>
</div>

然后当您对 DIV 进行选项卡化时，使其可见之后它的格式如下：

$('#tabs').tabs({ options }).css('visibility','visible');

使用 visibility:hidden 而不是 display:none 意味着选项卡 DIV 内的所有元素都将具有大小和位置，而 则不然>显示：无。