Heim  >  Artikel  >  Web-Frontend  >  Wie erstelle ich mit CSS und JavaScript eine gedrückte Umschalttaste?

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

Patricia Arquette
Patricia ArquetteOriginal
2024-11-02 09:39:02553Durchsuche

How to Create a Depressed Toggle Button with CSS and JavaScript?

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn