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

Question

引导选项卡很棒，但它们有一个令人讨厌的缺点：非活动选项卡上的内容会从页面流中删除。也就是说，当你切换到新标签页时，前一个标签页的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，如果你有水平溢出，请不要忘记在.tab-content>.active{...}下将width属性重置为正常。