jquery set li sélectionné-Questions et réponses frontales-php.cn

jquery set li sélectionné

WBOY

Libérer： 2023-05-12 11:06:36

original

1058 Les gens l'ont consulté

Lors de l'utilisation de jQuery pour le développement de pages, il est souvent nécessaire de définir l'état sélectionné d'un certain élément li dans la liste. Ce paramètre est très important pour certaines pages qui nécessitent un changement d'état. Cet article explique comment définir l'état sélectionné à l'aide de jQuery.

Tout d'abord, nous devons être clairs : pour définir l'état li sélectionné, nous devons définir un style puis appliquer le style à l'élément li requis via jQuery. De cette façon, lorsque nous cliquons sur l'élément li à sélectionner, nous pouvons changer l'état sélectionné en ajoutant ou en supprimant le style.

Ce qui suit est un exemple de code :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>设置li选中状态</title>
    <style type="text/css">
        .selected {
            background-color: #f5f5f5;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(function() {
            $('ul li').click(function() {
                $('ul li').removeClass('selected');
                $(this).addClass('selected');
            });
        });
    </script>
</head>
<body>
    <ul>
        <li>选项1</li>
        <li>选项2</li>
        <li>选项3</li>
    </ul>
</body>
</html>

Copier après la connexion

Le code ci-dessus implémente une liste d'options simple et ajoute un style pour l'état sélectionné. Lorsque nous cliquons sur une option dans la liste, l'état sélectionné est commuté via le code jQuery.

Plus précisément, nous utilisons la méthode click() de jQuery pour écouter l'événement click de chaque élément li, puis dans la fonction de gestionnaire d'événements, supprimons d'abord le style sélectionné de tous les éléments li de la liste, puis supprimons le li actuellement cliqué. Ajoutez le style sélectionné à l'élément pour changer l'état sélectionné.

Une autre chose à noter est que nous utilisons les méthodes addClass() et removeClass() pour ajouter et supprimer des classes CSS afin de prédéfinir une classe CSS dans la feuille de style, puis utiliser le nom de la classe dans jQuery pour contrôler la sélection. style du statut.

Dans le processus de développement actuel, le sélecteur peut également être transformé et personnalisé de manière flexible en fonction des besoins réels. Par exemple, nous pouvons sélectionner l'élément li à exploiter via diverses méthodes telles que l'ID, les attributs, les noms de balises, etc. Nous pouvons également gérer une logique plus complexe en combinant des attributs personnalisés, des attributs de données, etc.

En bref, il est très simple d'utiliser jQuery pour définir l'état sélectionné de li. Il vous suffit de maîtriser quelques connaissances de base de jQuery pour implémenter des composants tels que des listes d'options qui nécessitent un changement d'état.

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!