顯示標簽前，防止整個頁面閃爍

Question

目前，我正在使用帶有以下代碼的頁面上的twitter bootstrap選項卡 。 我添加了一些javascript / jquery在URL中推送哈希標簽，因此實際上可以鏈接到選項卡。 這可以正常工作，但是當我加載第一個標簽時，我會看到整個頁面，然后我很快就只顯示第一個標簽。 現在，如果我單擊頁面上的選項卡，則一切正常，並且不再顯示整個頁面。 至少可以說，這種數據閃存很煩人。 關於我在做什么錯的任何想法嗎？

Jade模板代碼 ，編譯為標准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規則在渲染過程中立即執行，因此這些規則不會延遲。