CSS Estilo Visibilidad no se comporta como se esperaba

Tengo una página html con un control de pestañas básico. Uso javascript para mostrar y ocultar pestañas y tabular divs de contenido. Mi problema es que si cambio la visibilidad de un elemento dentro de uno de los separadores de contenido de pestañas a 'oculto', entonces de nuevo a 'visible', el elemento parece olvidar o perder su contenedor padre div y permanece visible, independientemente de su original visibilidad de los padresCSS Estilo Visibilidad no se comporta como se esperaba

Para ilustrar, tome el siguiente ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<script type="text/javascript"> 
    function hideTab(){ 
     document.getElementById('tab1').style.visibility = 'hidden' 
    } 
    function showTab(){ 
     document.getElementById('tab1').style.visibility = 'visible' 
    } 
    function hideContent(){ 
     document.getElementById('tc1').style.visibility = 'hidden' 
    } 
    function showContent(){ 
     document.getElementById('tc1').style.visibility = 'visible' 
    } 
</script> 
</head> 
<body> 
    <a href="javascript: hideTab()">Hide Tab</a><br /> 
    <a href="javascript: showTab()">Show Tab</a><br /> 
    <a href="javascript: hideContent()">Hide Content</a><br /> 
    <a href="javascript: showContent()">Show Content</a><br /><br /> 
    <div id="tab1" style="background:yellow;width:100px"> 
     <div id='tc1'>Content Text</div> 
    </div> 
</body> 
</html>

En IE8, haga clic en 'Hide Tab' y luego 'Mostrar ficha' esto funciona bien. Con la pestaña que se muestra, haga clic en "Ocultar contenido" y luego "Mostrar contenido". Esto también es correcto. Ahora haz clic en "Ocultar pestaña" nuevamente y deberías ver que la pestaña desaparezca pero el contenido permanezca incorrectamente.

En IE8, el problema desaparece cuando uso el modo de compatibilidad. Además, he notado que si elimino el elemento DOCTYPE, no puedo replicar el problema.

En Chrome (mi favorito personal) el problema persiste independientemente del elemento DOCTYPE. No he intentado esto en Firefox.

Estoy seguro de que hay una muy buena razón para este comportamiento, también estoy seguro de que habrá una solución simple para que mis pestañas funcionen correctamente. Espero tus comentarios.

Fuente

2010-01-21 SausageFingers

Esto se debe a que la propiedad de CSS 'visibilidad' se hereda, pero no afecta el diseño de la página. Por lo tanto, si establece un elemento para que se oculte, todos sus elementos secundarios estarán, a menos que los haga explícitamente visibles (que es el caso al especificar visibility: visible).

Debe restablecer la propiedad CSS que se heredará para obtener el comportamiento que desea. Puede hacerlo utilizando la palabra clave inherit como el valor: visibility: inherit

EDITAR O, como Javascript:

element.style.visiblity = 'inherit';

Fuente

2010-01-21 20:46:24 zneak

zneak - Muchas gracias, esto resolvió mi problema. Como me aconsejó, configuré cada elemento para 'heredar' después de cambiar a 'visible' y el problema se solucionó. Gracias. – SausageFingers

En lugar de establecer la visibilidad del elemento secundario como 'visible', configúrelo como 'heredar'; luego obedecerá a la configuración de visibilidad de los padres en lugar de anularla por completo.

Fuente

2010-01-21 20:45:02

que asumir que su ejemplo se simplifica, y en su código actual tiene varias pestañas . En ese caso, me sorprende que las respuestas publicadas funcionen para usted. ¿No desea conservar la visibilidad de tc1 cuando regrese a la pestaña1? Si lo hace, a continuación, se adhieren a su idea original, sino modificar las funciones de la ficha, como se muestra:

function hideTab(){ 
    document.getElementById('tab1').style.display = 'none' 
} 
function showTab(){ 
    document.getElementById('tab1').style.display = 'block' 
}

Tenga en cuenta que estoy modificando la propiedad de presentación en el div padre - no la propiedad de visibilidad.

Fuente

2010-12-12 21:56:22

CSS Estilo Visibilidad no se comporta como se esperaba

Respuesta

Cuestiones relacionadas