I want to create sort of tab menu. My problem is that before page is fully-loaded, tabbed content appears for a very short time (for few miliseconds or so) without CSS settings. After that, page is loading and then working correctly-tab content is appearing and disappearing just as I wanted. What can I do to avoid that? 

```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');
      }
    });
  });
});
```

```css
.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;
}
```

```html
<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>
```