如何防止引导选项卡破坏不活动的内容？ [状态标签切换]

Question

Bootstrap选项卡虽然很棒，但它们也有一个令人讨厌的缺点：非活动选项卡上的内容将从页面流中删除。换句话说，当您切换到新标签页时，前一个标签页的display属性设置为none（而不是设置visibility: hidden或使用其他方法）

就我而言，我已经使用foo标签上的Masonry.js动态定位了元素，每当我切换到bar然后又切换回foo时，我都必须重新计算他们的位置，因为他们都在top: 0px; left: 0px;

这是一个昂贵的行为，另一个示例是，当您在foo标签上填写了数据的表单，然后切换到bar时，所有填写的数据都会丢失，因此您必须重新输入-重新输入所有内容。

在切换时保持上一个标签页状态不变的最佳解决方法是什么？

Answer 1

到目前为止，这种解决方法对我来说还行得通：

您可以覆盖这些类，以使选项卡foo上的内容被“隐藏”，而不是从页面上完全删除。

.tab-content>.tab-pane {
  display: block;
  height: 0;
  overflow: hidden;
}

.tab-content>.active {
  height: auto;
  overflow: visible;
}

注意：如果水平溢出，也可以设置width: 0，请不要忘记在width下将.tab-content>.active{...}属性重置为正常状态。