Heim  >  Artikel  >  Web-Frontend  >  Wie erstelle ich einen Umschaltknopf mit Sass und jQuery?

Wie erstelle ich einen Umschaltknopf mit Sass und jQuery?

Barbara Streisand
Barbara StreisandOriginal
2024-11-02 02:26:02274Durchsuche

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>

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!

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