Wie erstelle ich einen Umschaltknopf mit Sass und 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>

JS:

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

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>

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!