jQuery选项卡：如何在加载时避免显示选项卡？

Question

我正在使用jQuery标签显示某些列表。我能够使标签工作。显然，它会在加载选项卡时显示所有内容。

有没有办法可以避免加载显示？

Answer 1

对于所有标签，只需提供style="display: none;"：

<div class="tab" style="display: none;">
  <!-- Tab Content -->
</div>

如果您使用默认的jQuery UI选项卡，也可以将其添加到CSS：

.ui-tabs-hide {display: none;}

Answer 2

您可以使用beforeLoad事件隐藏内容，并在完全加载后显示内容。

示例：

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

        /* before tab is loaded */
        beforeLoad: function(event, ui) {
            $('#content').hide();

        },
        /* tab is loaded */
        load: function(event, ui) {
            $('#content').show();
        }
    });
});

或简称为praveen kumar描述：

.ui-tabs-hide {display: none;}