时间戳

首页 > 解决方案 > 如何防止引导选项卡破坏非活动内容？[有状态标签切换]

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

问题描述

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

在我的情况下，我在选项卡上使用Masonry.jsfoo动态定位元素，每当我切换到bar然后切换回时，foo我都必须重新计算它们的位置，因为它们都在top: 0px; left: 0px;

这是一个代价高昂的行为，另一个例子是当您在选项卡上填写了一个包含数据的表单foo然后切换到 时bar，所有填写的数据都将丢失，因此您必须重新输入所有内容。

在切换时保持前一个选项卡状态不变的最佳解决方法是什么？

标签： javascripthtmlcsstwitter-bootstrapbootstrap-4

解决方案

到目前为止，此解决方法对我来说效果很好：

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

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

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

注意：你也可以设置width: 0是否有水平溢出，请不要忘记width在.tab-content>.active{...}.

推荐阅读