Utilisez jQuery pour implémenter l'effet de changement de valeur de l'attribut d'affichage-js tutoriel-php.cn

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

王林

Libérer： 2024-02-21 13:48:04

original

951 Les gens l'ont consulté

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

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

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>

Copier après la connexion

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();
    });
});

Copier après la connexion

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!