jQuery implementiert eine einfache Änderung der Schaltflächenfarbe
|
Wir möchten in HTML und CSS die Farbe eines Buttons festlegen. Obwohl wir damit den gewünschten Effekt erzielen können, ist der Vorgang ziemlich umständlich. Mit jQuery können wir diese Aufgabe problemlos erledigen. Nehmen wir an, wir haben jetzt eine Reihe von Schaltflächen
Wenn wir auf einen davon klicken, wird er rosa, und wenn wir auf einen anderen klicken, nehmen alle Schaltflächen außer der angeklickten wieder ihre ursprüngliche Farbe an. Was sollen wir tun? Tatsächlich sind nur wenige Codezeilen erforderlich, um
<Skript>
$(Funktion(){
$('Schaltfläche').Klick(Funktion(){
//Stellen Sie zuerst die Farbe der angeklickten Schaltfläche auf Pink ein$(this).css('background','pink');
//Setze die Farbe aller Geschwisterelemente außer dem aktuellen Element auf „leer“
//Geschwister sind alle Geschwisterelemente des ausgewählten aktuellen Elements (ausschließlich des aktuellen Elements)
$(diese).siblings('button').css('background','');
});
});
</Skript>Die Wirkung ist wie folgt:
Hier ist der vollständige Code:
<!DOCTYPE html>
<html>
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
<Titel>Wellfancy</Titel>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<Stil>
div{
Rand: 2px durchgehend hellrosa;
Rand: 50px automatisch;
Polsterung: 50px;
}
</Stil>
</Kopf>
<Text>
<div>
<button>Option 1</button>
<button>Option 2</button>
<button>Option 3</button>
<button>Option 4</button>
<button>Option 5</button>
<button>Option 6</button>
<button>Option 7</button>
</div>
<Skript>
$(Funktion(){
$('Schaltfläche').Klick(Funktion(){
$(this).css('Hintergrund','rosa');
$(this).siblings('button').css('background','');
});
});
</Skript>
</body>
</html> Wie Sie sehen, ist es nicht viel einfacher, wenn wir jQuery verwenden, als nur CSS? Wir können kürzere Codes verwenden, um komplexere Vorgänge abzuschließen. Das könnte Sie auch interessieren:
|
<<: mysql8.0.11 Winx64 Installations- und Konfigurationstutorial
>>: Bildschirmbefehl und Verwendung unter Linux
Artikel empfehlen
Versprechenskapselung wx.request-Methode
Im vorherigen Artikel wurde die Implementierungsm...
CSS3-Implementierungscode für einfaches Karussellbildschneiden
Umsetzungsideen Erstellen Sie zunächst einen über...
Node-Skript realisiert automatische Anmelde- und Lotteriefunktion
Inhaltsverzeichnis 1. Einleitung 2. Vorbereitung ...
Verwendung von Markierungs-Tags im CSS-Listenmodell
In diesem Artikel werden hauptsächlich die Stilat...
Beispiel für die Implementierung einer nahtlosen Endlosschleife im Hintergrund mithilfe einer CSS-Animation
1. Nachfrage Ein Bild bewegt sich in einer Endlos...
HTML-Auszeichnungssprache - Tabellen-Tag
Klicken Sie hier, um zum Abschnitt „HTML-Tutorial“...
Sechsstufiger Beispielcode für eine JDBC-Verbindung (Verbindung zu MySQL)
Sechs Schritte von JDBC: 1. Registrieren Sie den ...
Eine kurze Diskussion über den Unterschied zwischen MySQL-Primärschlüsselindex und Nicht-Primärschlüsselindex
Inhaltsverzeichnis Was ist ein Index Der Untersch...
Detaillierte Erklärung zur Implementierung der Anmeldefunktion durch Kombination von React mit der Formularkomponente von Antd
Inhaltsverzeichnis 1. React kombiniert mit Antd, ...
HTML-Tutorial, leicht zu erlernende HTML-Sprache
1. <body background=Bilddateiname bgcolor=Farb...
Zusammenfassung der Vue3-Slot-Nutzung
Inhaltsverzeichnis 1. Einführung in den V-Slot 2....
Gängige Methoden und Probleme der Docker-Bereinigung
Wenn Sie Docker für die Entwicklung im großen Maß...
Detaillierte Erklärung der Set-Datenstruktur von JavaScript
Inhaltsverzeichnis 1. Was ist Set 2. Konstruktor ...
MySQL-Löschfunktion für Mehrfachtabellenverbindungen
Löschen einer einzelnen Tabelle: LÖSCHEN AUS Tabe...
Praktische Erklärung zum Bearbeiten, Speichern und Beenden von Dateien unter Linux
Wie kann ich nach dem Bearbeiten einer Datei in L...