recherche

Maison  >  Article  >  interface Web  >  jquery implémente l'affichage caché des contrôles

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

PHPz
PHPzoriginal
2023-05-24 21:22:05723parcourir

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>

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>

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

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

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!

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：jquery définit la valeur sous formeArticle suivant：jquery définit la valeur sous forme

Articles Liés

Voir plus