Maison > Article > interface Web > Utilisez jQuery pour implémenter l'effet de changement de valeur de l'attribut d'affichage

Utilisez jQuery pour implémenter l'effet de changement de valeur de l'attribut d'affichage

王林original: 2024-02-21 13:48:04907parcourir

Utilisez jQuery pour implémenter leffet de changement de valeur de lattribut daffichage

Dans le développement front-end, nous rencontrons souvent le besoin de changer l'affichage et le masquage des éléments en fonction des opérations de l'utilisateur. L'attribut display peut réaliser cette fonction. Dans cet article, nous utiliserons jQuery pour implémenter l'effet de changement de valeur de l'attribut display. Apprenons ensuite comment utiliser jQuery pour obtenir cette fonctionnalité.

Tout d'abord, introduisez la bibliothèque jQuery dans le fichier HTML. Vous pouvez utiliser un CDN ou importer jQuery localement. Ensuite, nous créons une structure HTML simple pour démontrer l'effet de commutation :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display 切换效果</title>
</head>
<body>
    <button id="toggleButton">切换显示</button>
    <div id="content" style="display: none;">
        这是要切换显示的内容。
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

Dans le code ci-dessus, nous avons créé un élément bouton et un élément div. Initialement, l'attribut display de l'élément div est none, ce qui est un état caché. .

Ensuite, nous devons écrire du code jQuery dans le fichier script.js pour changer l'affichage et l'état caché de l'élément div lorsque vous cliquez sur le bouton :

$(document).ready(function() {
    $('#toggleButton').click(function() {
        $('#content').toggle();
    });
});

Dans le code ci-dessus, nous utilisons d'abord $(document).ready () La méthode garantit que le DOM est chargé avant d'exécuter le code. Ensuite, nous écoutons l'événement click du bouton et utilisons la méthode toggle() pour changer l'affichage et l'état masqué de l'élément div.

Maintenant, lorsque l'utilisateur clique sur le bouton, l'élément div bascule entre afficher et masquer. Il s'agit d'un exemple simple d'utilisation de jQuery pour obtenir l'effet de changement de valeur de l'attribut d'affichage. Vous pouvez modifier et étendre le code en fonction des besoins réels pour obtenir des effets interactifs plus riches. J'espère que cet article vous aidera !

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!

jquery html JS 事件 dom display

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

Article précédent：Le secret de la méthode efficace de remplacement des attributs de balise dans jQueryArticle suivant：Le secret de la méthode efficace de remplacement des attributs de balise dans jQuery

Articles Liés

Voir plus