J'ai une page HTML avec un contrôle de base de base. J'utilise JavaScript pour afficher et masquer les onglets et l'onglet Content DIVS. Mon problème est que si je changez la visibilité d'un élément à l'intérieur de l'un des détails de l'onglet DIV en "caché", puis de retour à "visible", l'élément semble oublier ou perdre son conteneur parent div et reste visible, quel que soit son original Visibilité des parents.
Pour illustrer, prenez l'exemple suivant: dans IE8 Cliquez sur "Masquer tab" puis "Afficher l'onglet" Ce fonctionnement OK. Avec l'onglet affichée, cliquez sur "Masquer le contenu", puis "Afficher le contenu" Ceci est également correct. Maintenant, cliquez sur 'Masquer l'onglet' à nouveau et vous devez voir que l'onglet disparaît, mais le contenu reste incorrect. dans IE8, le problème disparaît lorsque j'utilise le mode de compatibilité. En outre, j'ai remarqué que si je suppose que si je suppose que Doctype Element, je ne peux pas reproduire le problème. Chrome (mon favori personnel) Le problème est persistant quel que soit l'élément DOCTYPE. Je n'ai pas essayé cela dans Firefox. Je suis sûr qu'il y a une très bonne raison de ce comportement, je suis également sûr qu'il y aura une solution simple pour que mes onglets fonctionnent correctement . J'attends tes commentaires avec impatience.
3 Réponses :
Au lieu de définir la visibilité de l'élément enfant à «visible», réglez-le à «hériter» - alors cela obéira à ses parents de visibilité fixer au lieu de le remplacer de manière indépendante.
En effet, la «visibilité» de la propriété CSS est héritée, mais n'affecte pas la disposition de la page. Par conséquent, si vous définissez un élément à cacher, tous ses enfants seront, à moins que vous ne les rendez pas visibles explicitement (ce qui est le cas en spécifiant Vous devez réinitialiser le CSS propriété à hériter pour obtenir le comportement que vous voulez. Vous pouvez le faire en utilisant le mot-clé hériter comme valeur: visibilité: visible ). Visibilité: hériter
Je suppose que votre exemple est simplifié et dans votre code réel, vous avez plusieurs onglets. Dans ce cas, je suis surpris que les réponses postées fonctionnent pour vous. Vous ne voulez pas que la visibilité de TC1 préservée lorsque vous revenez au Tab1? Si vous faites, alors collez-vous à votre idée d'origine, mais modifiez l'onglet fonctionne comme indiqué comme indiqué:
function hideTab(){
document.getElementById('tab1').style.display = 'none'
}
function showTab(){
document.getElementById('tab1').style.display = 'block'
}