Maison >interface Web >tutoriel CSS >Comment puis-je afficher ou masquer un élément DIV à l'aide d'un clic sur un bouton ?

Comment puis-je afficher ou masquer un élément DIV à l'aide d'un clic sur un bouton ?

Patricia Arquette
Patricia Arquetteoriginal
2024-12-14 12:34:14657parcourir

How Can I Show or Hide a DIV Element Using a Button Click?

Comment basculer la visibilité d'un DIV avec un bouton

Question :

Comment puis-je afficher ou masquer un DIV lorsqu'un bouton est cliqué ?

Réponse :

Pour basculer la visibilité d'un DIV avec un bouton, vous pouvez utiliser JavaScript ou jQuery.

Utilisation de JavaScript pur :

  1. Obtenir une référence au bouton element:

    var button = document.getElementById('button');
  2. Définir une fonction pour basculer la visibilité :

    button.onclick = function() {
  3. Obtenir une référence à l'élément DIV :

    var div = document.getElementById('newpost');
  4. Vérifiez si le DIV est actuellement affiché :

    if (div.style.display !== 'none') {
  5. Basculez la visibilité en conséquence :

        div.style.display = 'none'; // Hide
    }
    else {
        div.style.display = 'block'; // Show
    }
    };

Utilisation de jQuery :

  1. Sélectionnez le bouton et liez un événement de clic gestionnaire :

    $("#button").click(function() {
  2. Sélectionnez le DIV et activez sa visibilité :

        $("#newpost").toggle();
    });

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