完整日历未在选项卡中呈现

Question

我有一些基本的自定义选项卡设置，这些选项卡使用显示/隐藏DIV的单击事件来运行。

尽管使用了render功能（文档），但FullCalendar并未显示在其中一个选项卡上。

$(".tabs .tab").click (e) ->
  ...
  $("#calendar").fullCalendar "render"

DIV #calendar最初是隐藏的，但据我了解，render 函数应该强制日历在每次单击时呈现。所有其他选项卡都可以正常工作，所以我知道显示/隐藏功能根本不是问题。

有谁知道这里可能出了什么问题？

Answer 1

问题最终与我显示/隐藏 DIV 的方式有关-

我用来隐藏 DIV 的 CSS 选择器过于宽泛，最终将display: none;分配给日历 DIV（它是选项卡内容 DIV 的子级）。

解决方案是改变：

$("#tab-contents div").hide()

自：

$("#tab-contents").children().hide

在HTML中，日历是这样显示的（在HAML中）：

#tab-contents
  #tab-calendar
    #calendar
  #tab-other
    ...

感谢您的帮助和建议，我应该在开始时发布更多代码。

Answer 2

某些脚本通常存在问题，无法在隐藏的 DIV 上正常工作。

我

通常会加载所有可见内容的页面，大约 200 毫秒后我隐藏所有需要隐藏的内容。

对于引导选项卡，

我将每个选项卡容器设置为"活动"类，对于选项卡菜单，我使用此触发器脚本。

setTimeout(function() {
    $('.my-tabs-control a').first().click();
}, 200);

您可以为自己的脚本尝试此解决方案。