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