Masquer et afficher du contenu avec CSS : une astuce sans JavaScript
Lorsque vous travaillez avec le développement Web, contrôler la visibilité du contenu est souvent essentiel. Traditionnellement, cela est réalisé à l'aide de JavaScript, mais CSS peut également être utilisé pour créer des effets de masquage et d'affichage élégants. Une de ces techniques est décrite ci-dessous, abordant un défi spécifique rencontré avec les approches précédentes.
Masquer/Afficher le basculement de contenu :
On peut utiliser CSS pour créer un basculement de contenu qui permet aux utilisateurs de masquer et d'afficher une liste d'éléments. L'extrait suivant illustre cette fonctionnalité :
#cont {
display: none;
}
.show:focus .hide {
display: inline;
}
.show:focus .hide #cont {
display: block;
}
Le défi :
Bien que le CSS ci-dessus obtienne l'effet souhaité, il se heurte à un inconvénient. Lorsque le contenu est affiché, il peut être masqué en cliquant simplement n'importe où sur la page. Ce comportement n'est pas souhaitable, car nous souhaitons que le contenu soit masqué uniquement lorsque vous cliquez sur le lien "Masquer".
Solution :
Pour résoudre ce problème, procédez comme suit Le code CSS et HTML révisé peut être utilisé :
CSS:
body {
display: block;
}
.span3:focus ~ .alert {
display: none;
}
.span2:focus ~ .alert {
display: block;
}
.alert {
display: none;
}
HTML :
Hide Me
Show Me
Some alarming information here
Avec ces changements, le message d'alerte ne sera masqué que lorsque l'on clique sur l'élément span "Hide Me". Cette solution résout efficacement le problème et fournit une méthode basée sur CSS pour masquer et afficher le contenu sans recourir à JavaScript.
Clause de non-responsabilité: Toutes les ressources fournies proviennent en partie d'Internet. En cas de violation de vos droits d'auteur ou d'autres droits et intérêts, veuillez expliquer les raisons détaillées et fournir une preuve du droit d'auteur ou des droits et intérêts, puis l'envoyer à l'adresse e-mail : [email protected]. Nous nous en occuperons pour vous dans les plus brefs délais.
Copyright© 2022 湘ICP备2022001581号-3