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
Analysieren Sie, wie Uniapp den Schnittstellendomänennamen dynamisch erhält
Hintergrund Der Domänenname der Schnittstelle ist...
Beispiel für eine CSS3-Tab-Animation mit dynamischem Hintergrundwechseleffekt
CSS 3-Animationsbeispiel - Dynamischer Effekt des...
MySQL 8.0.12 – Schnellinstallations-Tutorial
Die Installation von MySQL 8.0.12 dauerte zwei Ta...
Grundlegendes Tutorial zum WeChat-Miniprogramm: Verwendung von Echart
Vorwort Schauen wir uns zunächst den Endeffekt an...
Eine elegante Möglichkeit, die Autorisierungsanmeldung für WeChat-Applets zu handhaben
Vorwort Wenn das WeChat-Miniprogrammprojekt das A...
Implementierung eines verschachtelten Sprungs der Vue-Routing-Ansicht Router-Ansicht
Inhaltsverzeichnis 1. Ändern Sie die app.vue-Seit...
W3C Tutorial (4): W3C XHTML Aktivitäten
HTML ist eine Hybridsprache, die zum Veröffentlic...
Detaillierte Erklärung der Beziehung zwischen Linux- und GNU-Systemen
Inhaltsverzeichnis Was ist das Linux-System, das ...
UCenter-Homepage fügt Statistikcode hinzu
UCenter Home ist ein von Comsenz veröffentlichtes ...
Ursachen und Lösungen für MySQL-Deadlocks
Die Datenbank ist wie das Betriebssystem eine gem...
Detaillierte Erklärung zur Implementierung der Anmeldefunktion durch Kombination von React mit der Formularkomponente von Antd
Inhaltsverzeichnis 1. React kombiniert mit Antd, ...
Eine kurze Erläuterung verschiedener Möglichkeiten zum Übergeben von Parametern beim React-Routing
Die erste Methode zur Parameterübergabe ist die d...
MySql-Abfrageanweisung mit mehreren Bedingungen und dem Schlüsselwort „OR“
Im vorherigen Artikel wurde die MySql-Abfrageanwe...
Linux-Installation, MongoDB-Start und Lösung allgemeiner Probleme
MongoDB-Installationsprozess und Problemaufzeichn...
Der Unterschied zwischen Div und Tabelle in HTML (in allen Aspekten ausführlich besprochen)
1: Unterschiede bei Geschwindigkeit und Lademethod...