Las pestañas Bootstrap son geniales, pero tienen un inconveniente molesto: el contenido de las pestañas inactivas se elimina del flujo de la página. en otras palabras, cuando cambia a una nueva pestaña, el displayatributo de la pestaña anterior se establece en none(en lugar de configurar visibility: hiddeno usar otros métodos)
En mi caso, he colocado elementos dinámicamente usando Masonry.js en la pestaña foo, cada vez que cambio a bary luego vuelvo a footener que volver a calcular su posición, ya que todos están entop: 0px; left: 0px;
este es un comportamiento costoso, otro ejemplo es cuando tiene un formulario lleno de datos en la pestaña fooy luego cambia a bar, todos los datos completados se perderían, por lo que debe volver a ingresar todo nuevamente.
¿Cuál es la mejor solución para mantener intacto el estado de la pestaña anterior mientras se cambia?
Esta solución me funciona bien hasta ahora:
puede anular estas clases para que el contenido de la pestaña foose "oculte" y no se elimine totalmente de la página.
.tab-content>.tab-pane {
display: block;
height: 0;
overflow: hidden;
}
.tab-content>.active {
height: auto;
overflow: visible;
}
Nota: también puede configurar width: 0si tiene desbordamiento horizontal, no olvide restablecer el widthatributo a la normalidad inferior .tab-content>.active{...}.
Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.
En caso de infracción, por favor [email protected] Eliminar
Déjame decir algunas palabras