Содержимое с вкладками отображается на экране без настроек CSS всего за несколько миллисекунд, а затем загружается правильно

Question

Я хочу создать вид меню вкладок. Моя проблема заключается в том, что перед полной загрузкой страницы содержимое с вкладками появляется в течение очень короткого времени (в течение нескольких миллисекунд или около того) без настроек CSS. После этого страница загружается, а затем работает правильно, содержимое вкладки появляется и исчезает так, как я хотел. Что я могу сделать, чтобы избежать этого?

$(function() {
  $('.tabs-container').addClass('js');
  
  $('.tabs').each(function() {
    const $a = $(this).find('a');
    $a.on('click', function(e) {
      const $this = $(this);
      const href = $this.attr('href');
      const $target = $(href);

      if ($target.length) {
        e.preventDefault();
        $this.siblings('a').removeClass('active');
        $this.addClass('active');
        $target.siblings('.tab-content').removeClass('active');
        $target.addClass('active');
      }
    });
  });
});

.tabs {
  list-style-type: none;
  margin: 5px 0 0 0;
  padding: 0;
  clear: both;
  padding-bottom: 10px;
  overflow: hidden;
}

.tabs a {
  width: 20%;
  display: inline-block;
  height: 3em;
  margin: 2px;
  background: #eee;
  font-size: 1em;
  font-weight: bold;
  line-height: 3em;
  text-decoration: none;
  color: #333;
  text-align: center;
}

.tabs a.active {
  background: #EC185D;
  color: #fff;
}

.tabs-container.js .tab-content {
  display: none;
  padding: 1em;
  font-size: 2em;
  background: #eee;
  border-radius: 2px;
}

.tabs-container.js .tab-content.active {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="container">
  <div class="tabs">
    <a href="#tab1" class="active">tab1</a>
    <a href="#tab2">tab2</a>
    <a href="#tab3">tab3</a>
    <a href="#tab4">tab4</a>
  </div>
  <div class="tabs-container">
    <article id="tab1" class="tab-content active">
      <div class="tab-text">
        Content1
      </div>
    </article>
    <article id="tab2" class="tab-content">
      <div class="tab-text">
        Content 2
      </div>
    </article>
    <article id="tab3" class="tab-content">
      <div class="tab-text">
        Content 3
      </div>
    </article>
    <article id="tab4" class="tab-content">
      <div class="tab-text">
        Content4
      </div>
    </article>
  </div>
</div>

Answer 1

Эта проблема известна как «FOUC», или Flash из неустановленного контента. Проблема в том, что вы добавляете класс js через Javascript, который запускается после загрузки DOM. Поэтому между загрузкой страницы и запуском JS есть небольшая задержка, которая добавляет класс для скрытия элементов.

Лучший способ решить эту проблему - добавить класс непосредственно в элементы HTML. Таким образом, они будут скрыты, как только они загружены. Попробуйте это:

$(function() {  
  $('.tabs').each(function() {
    const $a = $(this).find('a');
    $a.on('click', function(e) {
      const $this = $(this);
      const href = $this.attr('href');
      const $target = $(href);

      if ($target.length) {
        e.preventDefault();
        $this.siblings('a').removeClass('active');
        $this.addClass('active');
        $target.siblings('.tab-content').removeClass('active');
        $target.addClass('active');
      }
    });
  });
});

.tabs {
  list-style-type: none;
  margin: 5px 0 0 0;
  padding: 0;
  clear: both;
  padding-bottom: 10px;
  overflow: hidden;
}

.tabs a {
  width: 20%;
  display: inline-block;
  height: 3em;
  margin: 2px;
  background: #eee;
  font-size: 1em;
  font-weight: bold;
  line-height: 3em;
  text-decoration: none;
  color: #333;
  text-align: center;
}

.tabs a.active {
  background: #EC185D;
  color: #fff;
}

.tabs-container.js .tab-content {
  display: none;
  padding: 1em;
  font-size: 2em;
  background: #eee;
  border-radius: 2px;
}

.tabs-container.js .tab-content.active {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="container">
  <div class="tabs">
    <a href="#tab1" class="active">tab1</a>
    <a href="#tab2">tab2</a>
    <a href="#tab3">tab3</a>
    <a href="#tab4">tab4</a>
  </div>
  <div class="tabs-container js"> <!-- note the 'js' class added here -->
    <article id="tab1" class="tab-content active">
      <div class="tab-text">
        Content1
      </div>
    </article>
    <article id="tab2" class="tab-content">
      <div class="tab-text">
        Content 2
      </div>
    </article>
    <article id="tab3" class="tab-content">
      <div class="tab-text">
        Content 3
      </div>
    </article>
    <article id="tab4" class="tab-content">
      <div class="tab-text">
        Content4
      </div>
    </article>
  </div>
</div>

Answer 2

Вы можете скрыть .tabs-container, пока ваш JS не будет инициализирован и выполнен. Например, простой способ сделать это:

.tabs-container:not(.js) {
  display: none;
}

Таким образом, он начинается скрытно, затем, когда ваши вкладки построены с использованием JS и он получает класс js, он становится видимым, поэтому вы не видите мигания инициализации.

$(function() {
  $('.tabs-container').addClass('js');
  
  $('.tabs').each(function() {
    const $a = $(this).find('a');
    $a.on('click', function(e) {
      const $this = $(this);
      const href = $this.attr('href');
      const $target = $(href);

      if ($target.length) {
        e.preventDefault();
        $this.siblings('a').removeClass('active');
        $this.addClass('active');
        $target.siblings('.tab-content').removeClass('active');
        $target.addClass('active');
      }
    });
  });
});

.tabs-container:not(.js) {
  display: none;
}

.tabs {
  list-style-type: none;
  margin: 5px 0 0 0;
  padding: 0;
  clear: both;
  padding-bottom: 10px;
  overflow: hidden;
}

.tabs a {
  width: 20%;
  display: inline-block;
  height: 3em;
  margin: 2px;
  background: #eee;
  font-size: 1em;
  font-weight: bold;
  line-height: 3em;
  text-decoration: none;
  color: #333;
  text-align: center;
}

.tabs a.active {
  background: #EC185D;
  color: #fff;
}

.tabs-container.js .tab-content {
  display: none;
  padding: 1em;
  font-size: 2em;
  background: #eee;
  border-radius: 2px;
}

.tabs-container.js .tab-content.active {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="container">
  <div class="tabs">
    <a href="#tab1" class="active">tab1</a>
    <a href="#tab2">tab2</a>
    <a href="#tab3">tab3</a>
    <a href="#tab4">tab4</a>
  </div>
  <div class="tabs-container">
    <article id="tab1" class="tab-content active">
      <div class="tab-text">
        Content1
      </div>
    </article>
    <article id="tab2" class="tab-content">
      <div class="tab-text">
        Content 2
      </div>
    </article>
    <article id="tab3" class="tab-content">
      <div class="tab-text">
        Content 3
      </div>
    </article>
    <article id="tab4" class="tab-content">
      <div class="tab-text">
        Content4
      </div>
    </article>
  </div>
</div>

Редактировать

У вас всегда будет небольшая задержка, потому что ваши вкладки создаются с помощью JS. Итак, что бы ни случилось, вам нужно загрузить jQuery, визуализировать DOM, дождаться готовности документа, а затем выполнить сборку вкладок. Обойти это невозможно, оно никогда не будет мгновенным. В качестве обходного пути вы можете скрыть весь тег #container или даже весь документ (<body>), а затем переключить его на видимый после создания вкладок.

$(function() {
  $('.tabs-container').addClass('js');
  
  $('.tabs').each(function() {
    const $a = $(this).find('a');
    $a.on('click', function(e) {
      const $this = $(this);
      const href = $this.attr('href');
      const $target = $(href);

      if ($target.length) {
        e.preventDefault();
        $this.siblings('a').removeClass('active');
        $this.addClass('active');
        $target.siblings('.tab-content').removeClass('active');
        $target.addClass('active');
      }
    });
  });
  
  $("body").show();
});

body {
  display : none;
}

.tabs {
  list-style-type: none;
  margin: 5px 0 0 0;
  padding: 0;
  clear: both;
  padding-bottom: 10px;
  overflow: hidden;
}

.tabs a {
  width: 20%;
  display: inline-block;
  height: 3em;
  margin: 2px;
  background: #eee;
  font-size: 1em;
  font-weight: bold;
  line-height: 3em;
  text-decoration: none;
  color: #333;
  text-align: center;
}

.tabs a.active {
  background: #EC185D;
  color: #fff;
}

.tabs-container.js .tab-content {
  display: none;
  padding: 1em;
  font-size: 2em;
  background: #eee;
  border-radius: 2px;
}

.tabs-container.js .tab-content.active {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="container">
  <div class="tabs">
    <a href="#tab1" class="active">tab1</a>
    <a href="#tab2">tab2</a>
    <a href="#tab3">tab3</a>
    <a href="#tab4">tab4</a>
  </div>
  <div class="tabs-container">
    <article id="tab1" class="tab-content active">
      <div class="tab-text">
        Content1
      </div>
    </article>
    <article id="tab2" class="tab-content">
      <div class="tab-text">
        Content 2
      </div>
    </article>
    <article id="tab3" class="tab-content">
      <div class="tab-text">
        Content 3
      </div>
    </article>
    <article id="tab4" class="tab-content">
      <div class="tab-text">
        Content4
      </div>
    </article>
  </div>
</div>

Answer 3

Вы можете скрыть содержимое при начальной загрузке и показать, когда вкладки закрыты,

ниже обновленный код

$(function() {
  $('.tabs-container').addClass('js');
  
  $('.tabs').each(function() {
    const $a = $(this).find('a');
    $a.on('click', function(e) {
      const $this = $(this);
      const href = $this.attr('href');
      const $target = $(href);

      if ($target.length) {
        e.preventDefault();
        $this.siblings('a').removeClass('active');
        $this.addClass('active');
        $target.siblings('.tab-content').removeClass('active');
        $target.addClass('active');
      }
    });
  });
  $('#container').show();
});

.tabs {
  list-style-type: none;
  margin: 5px 0 0 0;
  padding: 0;
  clear: both;
  padding-bottom: 10px;
  overflow: hidden;
}

.tabs a {
  width: 20%;
  display: inline-block;
  height: 3em;
  margin: 2px;
  background: #eee;
  font-size: 1em;
  font-weight: bold;
  line-height: 3em;
  text-decoration: none;
  color: #333;
  text-align: center;
}

.tabs a.active {
  background: #EC185D;
  color: #fff;
}

.tabs-container.js .tab-content {
  display: none;
  padding: 1em;
  font-size: 2em;
  background: #eee;
  border-radius: 2px;
}

.tabs-container.js .tab-content.active {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="container" style="display:none">
  <div class="tabs">
    <a href="#tab1" class="active">tab1</a>
    <a href="#tab2">tab2</a>
    <a href="#tab3">tab3</a>
    <a href="#tab4">tab4</a>
  </div>
  <div class="tabs-container">
    <article id="tab1" class="tab-content active">
      <div class="tab-text">
        Content1
      </div>
    </article>
    <article id="tab2" class="tab-content">
      <div class="tab-text">
        Content 2
      </div>
    </article>
    <article id="tab3" class="tab-content">
      <div class="tab-text">
        Content 3
      </div>
    </article>
    <article id="tab4" class="tab-content">
      <div class="tab-text">
        Content4
      </div>
    </article>
  </div>
</div>