Heim > Web-Frontend > js-Tutorial > So positionieren Sie das Klickereignis eines Div

So positionieren Sie das Klickereignis eines Div

yulia
Freigeben: 2018-09-19 15:32:46
Original
2262 Leute haben es durchsucht

In diesem Artikel geht es hauptsächlich um die Positionierung von Div-Click-Events. Freunde in Not können darauf verweisen.

Hintergrund: Mehrere Divs mit einem gemeinsamen Klassennamen lösen beim Klicken dasselbe Ereignis aus.
Funktion: Die Hintergrundfarbe des Divs, das das Klickereignis auslöst, wird rot und die Hintergrundfarbe anderer Divs ist grün.
Implementierungsidee: Verwenden Sie das Schlüsselwort $(this), um das Div abzurufen, das den Klick auslöst. Stellen Sie zunächst die Hintergrundfarbe aller aktuellen Divs auf Grün und dann die Hintergrundfarbe des aktuellen Divs auf Rot ein.
Über $(this): Der größte Unterschied besteht darin, dass es sich um ein JQuery-Objekt handelt, das das aktuelle Objekt darstellt.

<!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>
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonSo positionieren Sie das Klickereignis eines Div. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage