选项卡的内容无法在开头隐藏答案

【问题标题】：Tabs' contents fails to hide at the beginning选项卡的内容无法在开头隐藏
【发布时间】：2019-04-03 17:30:12
【问题描述】：

我将尝试解释这个问题，以便每个人都能完全理解。问题是我使用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

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

有没有办法避免这种情况？

【问题讨论】：

标签： tabs ruby-on-rails-5 activeadmin

【解决方案1】：

这通常称为 FOUC（无样式内容的 Flash）。这基本上是因为在 DOM 完成时会加载隐藏非活动选项卡的 CSS（或 JS）。

这通常可以通过直接在主模板中添加一些 CSS 来避免，如下所示：

.hide {
  display: none;
}

然后你可以将这个类添加到你的隐藏元素中，它们应该从一开始就被隐藏。随后覆盖display 属性的任何后续JS 或CSS 都可以根据需要轻松隐藏/显示内容。

我没有使用Active Admin，所以对这个具体的框架没有任何直接的经验，但以上是对问题的大致了解。

我希望这会有所帮助。

【讨论】：