Wie erstelle ich einen Umschaltknopf mit HTML und CSS?

Erstellen einer Umschaltschaltfläche mit HTML und CSS

Ihr Ziel ist es, eine Umschaltschaltfläche mit HTML und CSS zu erstellen, mit dem Verhalten des Einrastens ein gedrückter Zustand, wenn einmal darauf geklickt wird, und ein Freigabezustand, wenn erneut darauf geklickt wird. Um dies zu erreichen, können Sie die folgenden Ansätze in Betracht ziehen:

Verwendung von jQuery

Der empfohlene Ansatz ist die Verwendung von jQuery, einer JavaScript-Bibliothek, um das gewünschte Verhalten zu erreichen. jQuery bietet eine toggleClass()-Methode, mit der Sie zwischen zwei Zuständen für die Klasse eines Elements wechseln können. Dadurch können Sie einen Umschaltknopf mit zwei Klassen erstellen, die für die Zustände „Gedrückt“ und „Freigegeben“ unterschiedliche Stile haben.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
#button {
    /* Styling for released state */
}
#button.down {
    /* Styling for pushed state */
}
</style>
<script>
$(document).ready(function() {
    $('#button').click(function() {
        $(this).toggleClass("down");
    });
});
</script>

In diesem Beispiel erhält das Element „Schaltfläche“ die zusätzliche Klasse „ Wenn Sie darauf klicken, ändert sich das Erscheinungsbild in den Zustand „Gedrückt“. Wenn Sie erneut darauf klicken, wird die Klasse „Down“ entfernt und in den Status „Released“ zurückversetzt.

Verwendung von CSS und zusätzlichen Elementen

Obwohl nicht so einfach wie Mit jQuery ist es möglich, das Verhalten der Umschalttaste mithilfe von CSS und zusätzlichen HTML-Elementen nachzuahmen. Bei dieser Technik werden Kontrollkästchen verwendet und so gestaltet, dass sie wie Schaltflächen aussehen. Um ein nahtloses Erscheinungsbild zu erreichen, ist jedoch die Verwendung zusätzlicher Spans, Divs und JavaScript erforderlich, um die Statusänderungen zu verarbeiten.

Das obige ist der detaillierte Inhalt vonWie erstelle ich einen Umschaltknopf mit HTML und CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!