标签的内容未能在开始时隐藏

Question

我将尽力解释这个问题，以使每个人都能理解它。问题是我正在使用this syntaxis将数据和图表显示为几个标签。

换句话说

<div class="tabs">
  <ul class="nav nav-tabs" role="tablist">
    <li><a href="#consignment-details">Consignment Details</a></li>
    <li><a href="#consignment-details">Trucks</a></li>
  </ul>

  <div class="tab-content">
    <div id="consignment-details">
    </div>

    <div id="containers">
    </div>
  </div>
</div>

或

div(class: 'tabs') do
  ul(class: 'nav nav-tabs', role: 'tablist') do
    li { link_to 'Consignment Details', '#consignment-details' }
    li { link_to 'Containers', '#containers' }
  end

  div(class: 'tab-content') do
    div(id: 'consignment-details') do
    end

    div(id: 'containers') do
    end
  end
end

尽管我喜欢它的外观，但我总是注意到在开始的十分之几秒内如何看到所有选项卡（以及链接）的内容

有办法避免这种情况吗？

Answer 1

这通常称为FOUC（未样式化内容的闪烁）。这主要是因为在DOM完成后会加载隐藏非活动选项卡的CSS（或JS）。

通常可以通过直接在主模板中添加一些CSS来避免这种情况，例如：

.hide {
  display: none;
}

然后，您可以将此类添加到隐藏的元素中，并且从一开始就应该将其隐藏。随后覆盖display属性的所有后续JS或CSS都可以根据需要轻松隐藏/显示内容。

我不使用Active Admin，因此我没有对该特定框架的任何直接经验，但是以上内容是对该问题的一般理解。

我希望这会有所帮助。