jquery implémente l'affichage caché des contrôles-Questions et réponses frontales-php.cn

jquery implémente l'affichage caché des contrôles

PHPz

Libérer： 2023-05-24 21:22:05

original

701 Les gens l'ont consulté

jQuery est une bibliothèque JavaScript populaire largement utilisée dans le développement front-end. Cet article explique comment utiliser jQuery pour masquer et afficher les contrôles.

Tout d'abord, nous devons introduire la bibliothèque jQuery dans la page HTML. Vous pouvez choisir de l'importer en ligne ou de le télécharger localement.

<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

Copier après la connexion

Ensuite, ajoutez un ID ou une classe sur les contrôles qui doivent être masqués ou affichés afin qu'ils puissent être sélectionnés et manipulés dans jQuery.

<div id="myDiv">
    这是需要隐藏或显示的内容
</div>

<button class="myButton">点击显示/隐藏</button>

Copier après la connexion

Ajout d'un DIV avec l'ID "myDiv" et d'un bouton avec la classe "myButton".

Ensuite, utilisez la méthode jQuery dans le code JavaScript pour sélectionner les contrôles qui doivent être affichés ou masqués, et ajoutez les propriétés CSS correspondantes.

$(document).ready(function(){
    $(".myButton").click(function(){
        $("#myDiv").toggle();
    });
});

Copier après la connexion

Tout d'abord, nous utilisons la méthode $(document).ready() une fois le document prêt pour nous assurer que les éléments de la page sont chargés avant d'exécuter le code.

Ensuite, nous sélectionnons le bouton via le sélecteur $(".myButton") et ajoutons un événement de clic au bouton. Lorsque vous cliquez sur le bouton, la fonction de rappel est exécutée.

Dans la fonction de rappel, nous utilisons le sélecteur $("#myDiv") pour sélectionner le DIV qui doit être masqué ou affiché, et utilisons la méthode toggle() pour changer son état d'affichage. Cette méthode modifiera automatiquement la valeur de la propriété CSS "display" pour afficher ou masquer l'élément.

Si vous avez besoin d'un contrôle plus fin, vous pouvez utiliser les méthodes show() et hide() pour afficher et masquer les éléments respectivement.

$(document).ready(function(){
    $(".myButton").click(function(){
        $("#myDiv").toggle();
        // $("#myDiv").show();
        // $("#myDiv").hide();
    });
});

Copier après la connexion

Ce qui précède explique comment utiliser jQuery pour masquer et afficher les contrôles. En modifiant les sélecteurs et les propriétés CSS, nous pouvons contrôler rapidement l'état d'affichage des éléments de la page, rendant l'interaction plus conviviale et flexible.

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!