"Si un ouvrier veut bien faire son travail, il doit d'abord affûter ses outils." - Confucius, "Les Entretiens de Confucius. Lu Linggong"
Page de garde > La programmation > Comment puis-je masquer et afficher du contenu avec CSS sans JavaScript ?

Comment puis-je masquer et afficher du contenu avec CSS sans JavaScript ?

Publié le 2024-11-06
Parcourir:745

How Can I Hide and Show Content with CSS Without JavaScript?

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.

Dernier tutoriel Plus>

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