Umschaltschaltflächen: Semantisches HTML oder benutzerdefiniertes jQuery-Styling – was ist das Beste?

Umschaltschaltflächen erstellen: semantische vs. stilvolle Optionen

Umschaltschaltflächen ermöglichen es Benutzern, zwischen zwei Zuständen zu wechseln. Obwohl HTML nativ Kontrollkästchen-Eingaben enthält, erfüllen diese möglicherweise nicht immer die gewünschten visuellen Anforderungen.

Semantischer Ansatz: Kontrollkästchen-Styling

Der empfohlene semantische Ansatz umfasst die Verwendung eines Kontrollkästchens und des Stils Es unterscheidet sich je nach geprüftem Zustand. Allerdings kann es eine Herausforderung sein, ein Kontrollkästchen effektiv zu gestalten.

Alternative: jQuery und CSS

Für eine anpassbarere Lösung sollten Sie die Verwendung von jQuery und CSS in Betracht ziehen:

1. Umschalten zuweisen Ereignis:

   • Fügen Sie der Schaltfläche einen jQuery-Ereignishandler hinzu, normalerweise mit .click().

2. CSS umschalten Klassen:

   • Verwenden Sie .toggleClass(), um CSS-Klassen hinzuzufügen und zu entfernen, die das ändern Aussehen der Schaltfläche (z. B. „nach unten“).

3. CSS-Styling:

   • Erstellen Sie CSS-Klassen mit unterschiedlichen Rändern und Hintergrundstile für jeden Schaltflächenstatus (z. B. „oben“ und „oben“) „unten“).

Beispiel:

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

<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>

<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 vonUmschaltschaltflächen: Semantisches HTML oder benutzerdefiniertes jQuery-Styling – was ist das Beste?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!