在显示选项卡之前防止整页闪烁

Question

目前，我在带有以下代码的页面上使用twitter bootstrap tabs。我添加了一些 javascript/jquery 来在 url 中推送哈希标签，所以我实际上可以链接到一个选项卡。这很好用，但是当我加载第一个选项卡时，我会看到整个页面，然后我很快就会看到第一个选项卡。现在，如果我单击页面上的选项卡，一切正常，我不会再次显示整个页面。至少可以说，这种数据闪现令人讨厌。关于我做错了什么有什么想法吗？

Jade Template Code，编译成标准 HTML

    div(class="tabbable")
      ul(id="myTab", class="nav nav-tabs")
        li
          a(href="#surveyEditData", data-toggle="tab") Survey
        li
          a(href="#surveyEditQuestions", data-toggle="tab") Questions
        ...etc...

JavaScript 代码：

    $(function(){
      // Function to activate the tab
      function activateTab() {
        var activeTab = $('[href=' + window.location.hash.replace('/', '') + ']');
        activeTab && activeTab.tab('show');
      }

      // Trigger when the page loads
      activateTab();
    });

Answer 1

您会看到在 Javascript 执行完成之前呈现 HTML 的延迟。

要解决此问题，您需要将初始 CSS 样式（例如淡入淡出或隐藏）添加到除第一个选项卡之外的所有其他选项卡。

CSS 规则在渲染过程中立即执行，因此这些规则不会有延迟。