Wie erstelle ich mit CSS und JavaScript eine gedrückte Umschalttaste?

Interaktive Umschaltschaltflächen gestalten

Das Erstellen einer Umschaltschaltfläche, die gedrückt bleibt, wenn darauf geklickt wird, ist mit reinem CSS nicht direkt erreichbar. Um diesen Effekt zu erzielen, ist eine Kombination aus HTML, CSS und JavaScript erforderlich.

Verwendung von HTML und CSS:

Erwägen Sie die Verwendung eines Kontrollkästchens als zugrunde liegendes semantisches Element. Gestalten Sie es anders, je nachdem, ob es kariert ist oder nicht. Dieser Ansatz kann jedoch mit zusätzlicher HTML- und CSS-Komplexität verbunden sein.

Verwendung von jQuery:

Eine bessere Lösung ist die Verwendung von jQuery. Hier ist eine kompakte Funktion, die den Stil einer Schaltfläche zwischen zwei Zuständen umschaltet:

<code class="js">$(document).ready(function() {
  $('a#button').click(function() {
    $(this).toggleClass("down");
  });
});</code>

Zugehöriges CSS:

Um den Umschaltknopf zu formatieren, verwenden Sie das folgende CSS:

<code class="css">a {
  background: #ccc;
  cursor: pointer;
  border: solid 2px;
  padding: 5px;
}

a.down {
  background: #bbb;
  border-color: #777 #777 #eaeaea #eaeaea;
}</code>

HTML:

Schließlich fügen Sie die jQuery-Bibliothek ein und verwenden Sie das folgende HTML-Snippet, um die Schaltfläche zu implementieren:

<code class="html"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="button" title="button">Press Me</a></code>

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit CSS und JavaScript eine gedrückte Umschalttaste?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!