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;}