jquery 选项卡有时不呈现答案

【问题标题】：jquery tabs sometimes not renderedjquery 选项卡有时不呈现
【发布时间】：2014-01-24 06:43:35
【问题描述】：

我在 web 应用程序中遇到了一个奇怪的问题（使用 jQuery 1.10.2 和 jQuery UI 1.10.3：（选项卡插件的）选项卡有时会正确呈现，有时不会。“不正确”意味着 @ 987654321@s 与选项卡内容显示在另一个下方，没有

在 IE7、8、10 和 FF26 以及具有严格策略的机器以及具有更宽松策略的机器上都会发生这种情况。浏览器可能会错误地显示页面，然后您只需按 F5 即可正确重新加载。以前有没有其他人遇到过类似的问题？我不知道如何处理这件事，但项目经理希望看到一些事情发生......

（我已经使用 CSE HTMLValidator 验证了 HTML/JS，它没有报告问题，JS 控制台也没有显示任何错误，但报告了一些警告（如“预期声明，但发现 CSS-像'*cursor: hand;'之类的声明，但与我所做的事情无关）

【问题讨论】：

你能用小提琴展示这个问题吗？
我想过一个精简的例子，但这并不容易——因为我精简的任何东西都可能与问题有关——所以问题更多的是关于“调试-程序”，要看的东西等等，而不是修复有问题的代码行的问题......

标签： jquery-ui jquery-tabs

【解决方案1】：

你是如何加载标签内容的？是下载的时候在页面里，还是通过Ajax加载的？

如果文档中已经存在，您应该尝试隐藏（显示：无）内容 div - 这样如果选项卡初始化失败（这可能是间歇性发生的），您将不会看到所有内容。

这听起来可能是时间问题 - 选项卡在哪里初始化？确保它们在 document.ready 函数中，这样你就可以确定 jQuery 和 jQuery UI 首先完全加载。

失败后，您可以尝试从控制台手动初始化选项卡 - 结果（成功或失败）应该会提供一些额外的信息。

还可以使用 Firebug 检查内容 div 以查看它们是否被选项卡初始化更改 - 应该添加类。

【讨论】：

感谢约翰，提供这些有用的建议。首先，所有内容都在页面中。初始化在 $(document).ready 中。尝试从控制台调用 init 根本没有给出任何消息（但返回了一个包含所有 div 的对象）-但也没有更改 UI。
关于添加的类：container-div 添加了“ui-tabs ui-widget”等，各个选项卡的 div 没有被更改。
在该状态下单击选项卡时，控制台显示Error: jQuery UI Tabs: Mismatching fragment identifier。这（就像在 Firefox 中检查 HTML 时出现的几个错误“检查元素”（或者是“检查”-我使用的是德语）似乎表明 HTML 有问题-但 HTML Validator 没有发现标签不匹配的问题.. .
如果您将内容 DIV 弄乱了，通常会发生该错误，从而无法找到
中指定的 ID。检查您的 DIV 是否包含在包含 UL 的同一 DIV 中。还要确保在 DIV ID 的开头没有“#”（在 LI 的 href 中需要它，但在匹配的 DIV ID 中不需要）。

嗯......惊喜，惊喜......在重新检查 HTML 时，我发现了一个丢失的 div，检查了我的 PHP 并修复了错误 - 最后一切都很好地呈现！我确定 HTML 之前是完整的，但是在过去的几天里，整个事情发生了很大的变化，以至于我无法完全复制 - 无论如何，我很高兴它可以工作 :) 再次感谢您的支持和有用的建议！