02 Voix

jQuery: Afficher et Masquer Éléments

Tutoriel de Stefan Trost | 23/03/2021 à 21:59

Dans ce didacticiel, j'aimerais vous montrer comment faire disparaître un élément HTML visible ou rendre un élément invisible à nouveau visible à l'aide de JavaScript et de jQuery.

Afficher des Éléments

Comme point de départ, nous avons le conteneur DIV invisible suivant.

<div id="d" style="display:none">Invisible</div>

Nous aimerions afficher cette boîte maintenant. Pour rendre un élément HTML visible, jQuery fournit la fonction .show(), que nous appelons maintenant simplement avec l'ID de la boîte DIV (avec un # précédent, nous nous référons aux ID - avec un . précédent classes).

$("#d").show();

Si l'évanouissement est trop rapide ou trop lent pour nous, nous pouvons passer une valeur de temps à la fonction en tant que paramètre indiquant le temps que la fonction doit prendre. La valeur par défaut est 400, si cela prend deux fois plus de temps, nous pouvons écrire .show(800).

Masquer des Éléments

Semblable à la fonction .show(), jQuery fournit la fonction .hide() pour masquer des éléments.

$("#d").hide();

Encore une fois, nous pouvons passer le temps comme paramètre, par exemple .hide(200).

Toggle - Afficher et masquer des Élément en alternance

Parfois, nous avons la situation où nous voulons rendre un élément visible ou invisible alternativement, selon l'état dans lequel l'élément se trouve actuellement. Mais nous n'avons pas besoin d'écrire une fonction élaborée avec .show() et .hide() car jQuery donne utilisez la fonction .toggle().

$("#d").toggle();

Avec .toggle(), la boîte DIV avec l'ID "d" sera affichée ici si elle est actuellement invisible ou masquée si elle est actuellement visible.

RépondrePositifNégatif

Sur l’Auteur

AvatarVous pouvez trouver des logiciels de Stefan Trost sur fr.sttmedia.com. Avez-vous besoin d'un logiciel personnalisé selon vos propres besoins? Écrivez-nous: fr.sttmedia.com/contact
Voir Profil

 

Sujets Connexes

jQuery: Remplacer élément

Question | 1 Réponse

Avis Important

Veuillez noter: Les contributions publiées sur askingbox.com sont des contributions d’utilisateurs et ne doivent pas remplacer les conseils d’un professionnel. Ils ne sont pas vérifiés par des indépendants et ne reflètent pas nécessairement l’opinion de askingbox.com. Apprendre encore plus.

Participer

Posez votre propre question ou écrivez votre propre article sur askingbox.com. Voici comment.