Tab菜单加载前无样式内容短暂闪现的解决方法咨询

这个问题其实是FOUC（Flash of Unstyled Content）——也就是页面样式还没完全生效前，内容短暂以原始状态显示的情况。你的代码里，.tabs-container.js .tab-content这个选择器要等JS执行后给容器加上js类才会生效，而JS是在DOM加载完成后才运行的，这就导致加载瞬间所有Tab内容都暴露出来了。

给你两个简单有效的解决方案：

方案一：直接在HTML中预添加js类 #

既然我们需要依赖js类来控制内容的显示隐藏，那不如一开始就在HTML里给.tabs-container加上这个类，这样CSS在页面加载时就能直接生效，不用等JS执行。

修改后的HTML片段：

<!-- 这里直接加上js类 -->
<div class="tabs-container js">
 <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>

然后JS里可以删掉这行代码（留着也没关系，重复添加类不会有问题）：

// 删掉这一行：$('.tabs-container').addClass('js');

这个方案的好处是：

• 彻底解决闪烁问题，CSS加载后立刻隐藏非激活的Tab内容
• 兼顾无JS场景：如果用户浏览器禁用JS，你可以把js类去掉，此时所有Tab内容都会显示，锚点链接也能正常跳转

方案二：调整CSS，默认隐藏非激活内容 #

如果你不想修改HTML，可以直接调整CSS规则，不依赖js类来隐藏内容：

修改后的CSS片段：

/* 直接隐藏非active的tab-content，不需要依赖js类 */
.tab-content { display: none; padding: 1em; font-size: 2em; background: #eee; border-radius: 2px; } 
.tab-content.active { display: block; }

不过这个方案有个小缺点：如果用户浏览器禁用JS，那么除了默认激活的Tab内容，其他Tab内容会一直隐藏，无法通过点击链接显示（因为JS负责切换active类）。所以方案一更推荐，兼顾可用性和用户体验。

整合后的完整代码（方案一） #

<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">
 <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>

<style>
.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; }
</style>

<script>
$(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');
      }
    });
  });
});
</script>

内容的提问来源于stack exchange，提问作者szlachtaga