Maison > interface Web > js tutoriel > le corps du texte

Comment positionner l'événement click d'un div

yulia
Libérer: 2018-09-19 15:32:46
original
2211 Les gens l'ont consulté

Cet article parle principalement du positionnement des événements div click. Les amis dans le besoin peuvent s'y référer, j'espère qu'il pourra vous aider.

Arrière-plan : plusieurs divs, avec un nom de classe commun, déclenchent le même événement lorsqu'ils sont cliqués.
Fonction : La couleur d'arrière-plan du div qui déclenche l'événement de clic devient rouge et la couleur d'arrière-plan des autres divs est verte.
Idée d'implémentation : utilisez le mot-clé $(this) pour obtenir le div qui déclenche le clic. Tout d'abord, définissez la couleur d'arrière-plan de tous les div actuels sur vert, puis définissez la couleur d'arrière-plan du div actuel sur rouge.
À propos de $(this) : La plus grande différence par rapport à ceci est qu'il s'agit d'un objet jquery. De la même manière, il représente l'objet actuel.

<!DOCTYPE html><html>
   <head>
       <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
       <meta charset="UTF-8">
       <link rel="stylesheet" href="../css/airTicket.css"> 
       <script src="../js/jquery.min.js" ></script>
       <style>
           .div1{               
            background-color:#4CD964;               
             height:20px;                
             margin-top:10px;           
              }
       </style>
   </head>
   <body>
       <div class="div1" id="a1">div_1</div>
       <div class="div1" id="a2">div_2</div>
       <div class="div1" id="a3">div_3</div>
       <div class="div1" id="a4">div_4</div>
       <div class="div1" id="a5">div_5</div>
       <script>
           $(function(){
               $(".div1").click(function(){
                   var id = $(this)[0].id;
                   conlose.log(id);
                   $(&#39;div&#39;).css("background-color","green");
                   $(this).css("background-color","red");
               })
           })        </script>
   </body>
</html>
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal