Maison  >  Article  >  interface Web  >  Pouvez-vous afficher et masquer les divisions avec CSS uniquement ?

Pouvez-vous afficher et masquer les divisions avec CSS uniquement ?

Linda Hamilton
Linda Hamiltonoriginal
2024-11-22 10:30:15184parcourir

Can You Show and Hide Divs with CSS Only?

Afficher et masquer les divs avec CSS uniquement

Vous souhaitez afficher ou masquer les divs en fonction des entrées de l'utilisateur, mais avec CSS uniquement ? Voyons comment y parvenir sans recourir à JavaScript.

Énoncé du problème :

L'utilisateur souhaite afficher et masquer les divs au clic en utilisant uniquement CSS. Bien que jQuery soit actuellement utilisé, ils préfèrent une solution accessible qui fonctionne même avec JavaScript désactivé.

Solution CSS uniquement : Checkbox Hack

Pour une solution CSS pure, considérez le hack de case à cocher. Cette méthode consiste à utiliser une case à cocher pour contrôler l’affichage des divs. Lorsque la case est cochée, un ensemble de styles est appliqué, et lorsqu'elle est décochée, un autre ensemble est utilisé. Le pseudo-sélecteur :checked est utilisé pour différencier ces états.

Pour masquer la case à cocher à des fins esthétiques, attachez-la à une étiquette.

Démo et ressources

  • [Dabblet Démo](http://dabblet.com/gist/1506530)
  • [Article sur les astuces CSS sur le piratage des cases à cocher](http://css-tricks.com/the-checkbox-hack/)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn