javascript - 选项卡式内容在没有 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

您可以在初始加载时隐藏内容并在选项卡隐藏时显示，

下面是更新的代码

$(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>