Klicken Sie in JQuery auf „Stil hinzufügen und löschen'.

jquery ist eine effiziente und häufig verwendete JavaScript-Bibliothek. Sie wird hauptsächlich zur Vereinfachung des Durchlaufs und der Bedienung von HTML-Dokumenten, der Ereignisverarbeitung und der Implementierung von Animationseffekten verwendet. Das Hinzufügen und Löschen von Stilen in jQuery ist ebenfalls eine häufige Aufgabe. Hier stellen wir vor, wie Sie mit jQuery Stile mit einem Klick hinzufügen und löschen.

Zuerst müssen wir eine einfache Stilliste mit HTML und CSS erstellen. In HTML können wir mithilfe der Tags ul und li eine einfache ungeordnete Liste erstellen. Der Code lautet wie folgt:

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

Als nächstes können wir in CSS Stile für die Listenelemente angeben, die beim Hinzufügen und Entfernen von Stilen verwendet werden sollen. Der Code lautet wie folgt:

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

Jetzt können wir in der JavaScript-Datei jQuery verwenden, um Stile hinzuzufügen und zu entfernen. Zuerst müssen wir alle Listenelemente mit dem jQuery-Selektor finden und ihnen mit der Funktion click() Klickereignisse hinzufügen. Der Code lautet wie folgt:

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

Im Klickereignis können wir die Funktion toggleClass() zum Hinzufügen oder Entfernen verwenden. Die ausgewählte Klasse ist ein Stil, der in CSS definiert wurde. Hier ist der Code:

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

Wenn nun auf Listenelemente geklickt wird, wird der Stil des ausgewählten Status umgeschaltet. Wenn es bereits ausgewählt ist, deaktivieren Sie es und umgekehrt. Dieses Beispiel kann online übernommen werden: https://codepen.io/alenaofficial/pen/zYGOYap

So einfach ist das Hinzufügen und Löschen von Stilen, und mit jQuery können wir problemlos dynamische Stiländerungen implementieren, um die Benutzererfahrung zu verbessern.

Das obige ist der detaillierte Inhalt vonKlicken Sie in JQuery auf „Stil hinzufügen und löschen'.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!