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

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规则在渲染过程中立即执行，因此这些规则不会有延迟。