Optionsfelder sind eines der beliebtesten Elemente der Benutzeroberfläche. Sie werden verwendet, um eine von zwei oder mehr Optionen auszuwählen. Um den Schalter übersichtlicher und verständlicher zu machen, können Sie ihm eine Hervorhebung hinzufügen, die auf die aktuell ausgewählte Option hinweist. In diesem Artikel erfahren Sie, wie Sie die Hintergrundbeleuchtung für einen Schalter auf einer Webseite einfach und einfach implementieren können.
Zuerst benötigen wir den grundlegenden HTML-Code des Schalters. Es ist normalerweise ein Satz von Radio-Buttons oder Checkboxen, die in einem Behälter eingeschlossen sind. Sie müssen für jede Radio-Schaltfläche oder jedes Checkbox eine eindeutige ID und einen eindeutigen Namen angeben, um dann mit Hilfe von CSS leicht anzugeben, welches Element hervorgehoben werden soll.
Anmerkung: Wenn Ihre Website bereits über Schalter verfügt, die mit einer Hintergrundbeleuchtung ergänzt werden müssen, stellen Sie sicher, dass jede Radio-Taste oder jedes Checkbox-Gerät eine eindeutige Kennung enthält. Andernfalls fügen Sie sie selbst hinzu.
Jetzt, da wir den HTML-Code des Schalters haben, können Sie mit dem Styling beginnen. Dazu wird CSS verwendet. Suchen Sie den gewünschten Selektor, der dem ausgewählten Auswahlelement entspricht, und wenden Sie Eigenschaften an, die die gewünschte Hervorhebung festlegen. Dies kann sein, dass Sie die Hintergrundfarbe ändern, die Textfarbe ändern oder einen Rahmen um das ausgewählte Element hinzufügen.
Nachdem Sie die Hervorhebungsstile für die ausgewählten Optionsfelder konfiguriert haben, stellen Sie sicher, dass die hinzugefügten Regeln korrekt angewendet werden. Wenn Sie dann die Optionen wechseln, muss das ausgewählte Element entsprechend den angegebenen Stilen hervorgehoben werden. Passen Sie die Stile bei Bedarf an, bis Sie das gewünschte Ergebnis erzielen.
Arbeitsbeginn
Bevor Sie mit der Erstellung der Hintergrundbeleuchtung für den Schalter beginnen, müssen Sie die Arbeitsumgebung vorbereiten und alle notwendigen Werkzeuge und Materialien zusammenbauen.
- Stellen Sie sicher, dass Sie einen Texteditor installiert haben, der mit HTML- und CSS-Dateien arbeiten kann. Wenn nicht, laden Sie einen geeigneten Editor herunter, und installieren Sie ihn, z. B. Sublime Text oder Visual Studio Code.
- Erstellen Sie einen neuen Ordner für das Projekt und benennen Sie ihn nach Belieben.
- Erstellen Sie im Ordner eine neue Datei mit der Erweiterung .html. Nennen Sie es zum Beispiel index.html.
- Öffnen Sie die erstellte Datei im ausgewählten Texteditor.
- Fügen Sie die folgende grundlegende HTML-Codestruktur hinzu:
Подсветка для переключателя Подсветка для переключателя
- Das Tag verweist auf die Version von HTML, die wir verwenden (HTML5).
- Der Titel gibt den Namen unserer Webseite an, der im Titel des Webbrowsers angezeigt wird.
- Das Tag fügt die styles-Datei ein.css .
- Zwischen den Tags und der Code für den Schalter wird platziert.
- Alle externen Stildateien und Skripts werden in den folgenden Schritten eingebunden.
Schritt 1: Erstellen von HTML-Markups
Hier ist ein Beispiel für HTML-Code, der einen einfachen Schalter erstellt:
In diesem Beispiel verwenden wir ein Tag, um den Text "Schalter" anzuzeigen, und ein Tag mit dem Attribut type="checkbox", um den Schalter selbst zu erstellen.
Es ist auch wichtig, ein for-Attribut im Tag und ein id-Attribut im Tag mit denselben Werten anzugeben. Auf diese Weise können Sie eine Beziehung zwischen dem Text und dem Schalter selbst herstellen.
Schritt 2: Stilisieren des Schalters
Nachdem Sie den Schalter selbst erstellt haben, müssen Sie ihn stilisieren, damit er attraktiv aussieht und die Aufmerksamkeit des Benutzers auf sich zieht. Dafür werden wir CSS verwenden.
1. Fügen Sie für jeden Schalterstatus CSS-Klassen hinzu (z. B. 'on' und 'off').
2. Wenden Sie diese Klassen mithilfe von CSS-Selektoren auf die entsprechenden Schalterzustände an.
3. Ändern Sie die Hintergrundfarbe und die Schriftart des Textes für jeden Status entsprechend Ihrem Design.
4. Fügen Sie Stile hinzu, um den Übergang zwischen den Zuständen zu animieren (z. B. eine sanfte Änderung der Hintergrundfarbe).
Hier ist ein Beispiel für ein CSS-Stylesheet zum Formatieren eines Schalters:
Beachten Sie, dass wir in diesem Beispiel die Klassen 'switch', 'slider' sowie die Klassen 'on' und 'off' für die Schalterzustände verwendet haben. Sie können diese Klassen entsprechend Ihren Bedürfnissen und Ihrem Design ändern.
Nachdem Sie die Stile angewendet haben, ist Ihr Schalter stilvoll und einsatzbereit!
Hinzufügen von Funktionen
Um beim Umschalten eine Hervorhebung zu erstellen, müssen Sie JavaScript-Code hinzufügen, der die Hintergrundfarbe des Elements ändert, wenn es aktiviert wird.
1. Fügen Sie den folgenden Code in den Abschnitt ein
2. Fügen Sie jedem Element ein onclick-Attribut hinzu, das die toggleHighlight-Funktion aufruft und this an sie übergibt:
| Переключатель 1 | Переключатель 2 | Переключатель 3 |
3. Fügen Sie Stile für das aktive Element innerhalb des Abschnitts hinzu
.active
Wenn Sie nun auf jeden Schalter klicken, wird eine Klasse hinzugefügt.active, das die gelbe Hintergrundfarbe angibt. Wenn Sie auf einen anderen Klassenschalter klicken .active wird vom vorherigen Element entfernt und dem neuen Element hinzugefügt, wodurch ein Hervorhebungseffekt entsteht.
