[分享]css切换tab高度不一时闪动

在使用CSS制作tab切换的时候，如果不同tab内容高度不一，就会出现切换时页面闪动的问题。下面我来详细讲解如何解决这个问题。首先，让我们来看一下这个问题的原因。当切换到高度不同的tab时，页面的高度...

在使用CSS制作tab切换的时候，如果不同tab内容高度不一，就会出现切换时页面闪动的问题。下面我来详细讲解如何解决这个问题。

首先，让我们来看一下这个问题的原因。当切换到高度不同的tab时，页面的高度会发生变化，这会导致页面的重新渲染，从而造成页面闪动。为了解决这个问题，我们需要在CSS样式中增加一些额外的属性。

.tab-container{
  overflow:hidden;
  position:relative;
}
.tab-content{
  position:absolute;
  top:100%;
  left:0;
  opacity:0;
  visibility:hidden;
  transition:all .3s ease;
}
.tab-content.active{
  position:relative;
  opacity:1;
  visibility:visible;
  transition:all .3s ease;
}

在上面的代码中，我们给.tab-container增加了overflow:hidden和position:relative属性，这样就能够让后续的.tab-content标签在tab-container的范围内进行显示了。同时，我们给.tab-content增加了position:absolute;top:100%;left:0;opacity:0;visibility:hidden;这些属性，这样在tab-content初始状态下，它们会在tab-container的下方隐藏起来。

当.tab-content被激活时，我们会增加一个.active类。在.active类中，我们通过position:relative;opacity:1;visibility:visible;的属性值来让tab-content在页面中显示出来。

通过上述方法，我们成功地解决了tab切换高度不一时页面闪动的问题。希望这篇文章对你的开发工作有所帮助。