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

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

1 个答案: