Содержимое вкладок не скрывается в начале

Question

Я постараюсь объяснить эту проблему, чтобы она была понятна всем.Дело в том, что я отображаю данные и диаграммы, разделенные на несколько вкладок, используя этот синтаксис .

Другими словами

<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 (Flash из Unstyled Content).Это в основном потому, что CSS (или JS), который скрывает неактивные вкладки, загружается после завершения DOM.

Этого обычно можно избежать, добавив немного CSS непосредственно в основной шаблон, например:

.hide {
  display: none;
}

Затем вы можете добавить этот класс к скрытым элементам, и они должны быть скрыты отсамое начало.Любой последующий JS или CSS, который затем переопределяет свойство display, может легко скрыть / показать содержимое по мере необходимости.

Я не использую Active Admin, поэтому у меня нет прямого опыта для этой конкретной среды, но вышеизложенное является общим пониманием проблемы.

Надеюсь, это поможет.