Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie erstelle ich einen Umschaltknopf mit Sass und jQuery?

Barbara Streisand
Freigeben: 2024-11-02 02:26:02
Original
275 Leute haben es durchsucht

How to Create a Toggle Button with Sass and jQuery?

Erstellen einer Umschaltschaltfläche mit Sass und jQuery

Wenn Sie eine Umschaltschaltfläche erstellen möchten, die ihren Zustand beim Klicken beibehält, sind Sie genau richtig Ich muss über CSS allein hinausgehen.

Semantischer Ansatz

Der bevorzugte Ansatz ist die Verwendung eines Kontrollkästchens, das entsprechend seinem aktivierten Zustand stilisiert wird. Dies kann jedoch zusätzliche Elemente und Komplexität mit sich bringen.

jQuery-Lösung

Eine effizientere Methode ist die Verwendung von jQuery und zwei Hintergrundbildern für die verschiedenen Schaltflächenzustände.

HTML:

<code class="html"><a id="button" title="button">Press Me</a></code>
Nach dem Login kopieren

JS:

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

CSS:

<code class="css">a {
  background: #ccc;
  cursor: pointer;
  border-top: solid 2px #eaeaea;
  border-left: solid 2px #eaeaea;
  border-bottom: solid 2px #777;
  border-right: solid 2px #777;
  padding: 5px 5px;
}

a.down {
  background: #bbb;
  border-top: solid 2px #777;
  border-left: solid 2px #777;
  border-bottom: solid 2px #eaeaea;
  border-right: solid 2px #eaeaea;
}</code>
Nach dem Login kopieren

Diese jQuery-Funktion schaltet die „Down“-Klasse auf der Schaltfläche um, wenn darauf geklickt wird. Die CSS-Klassen definieren die Hintergrundbilder und Rahmenstile für jeden Bundesstaat.

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

Quelle:php.cn
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage