jquery cliquez sur ajouter un style de suppression

jquery est une bibliothèque JavaScript efficace et couramment utilisée. Elle est principalement utilisée pour simplifier la traversée et le fonctionnement des documents HTML, le traitement des événements et la mise en œuvre d'effets d'animation l'utilisent souvent pour développer des pages Web hautement interactives. L'ajout et la suppression de styles dans jQuery sont également une tâche courante. Nous allons présenter ici comment utiliser jQuery pour ajouter et supprimer des styles en un seul clic.

Tout d’abord, nous devons créer une liste de styles simple en utilisant HTML et CSS. En HTML, nous pouvons créer une simple liste non ordonnée à l'aide des balises ul et li, le code est le suivant :

<ul class="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

Ensuite, en CSS, nous pouvons spécifier des styles pour les éléments de la liste à utiliser lors de l'ajout et de la suppression de styles. Le code est le suivant :

.myList li{
  padding:10px;
  border:1px solid black;
  cursor:pointer;
}
.myList li.selected{
  background-color:gray;
  color:white;
}

Désormais, dans le fichier JavaScript, nous pouvons utiliser jQuery pour ajouter et supprimer des styles. Tout d'abord, nous devons trouver tous les éléments de la liste à l'aide du sélecteur jQuery et leur ajouter des événements de clic à l'aide de la fonction click(), le code est le suivant :

$(document).ready(function(){
  $('.myList li').click(function(){
    //代码将在此处添加
  });
});

Dans l'événement click, nous pouvons utiliser la fonction toggleClass() pour ajouter ou supprimer. La classe sélectionnée est un style défini en CSS. Le code est le suivant :

$(document).ready(function(){
  $('.myList li').click(function(){
    $(this).toggleClass('selected');
  });
});

Désormais, lorsque vous cliquez sur les éléments de la liste, ils changeront le style de l'état sélectionné. S'il est déjà sélectionné, désélectionnez-le et vice versa. Cet exemple peut être adopté en ligne : https://codepen.io/alenaofficial/pen/zYGOYap

C'est aussi simple que cela d'ajouter et de supprimer des styles, et en utilisant jQuery, nous pouvons facilement implémenter des changements de style dynamiques pour améliorer l'expérience utilisateur.

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!