Heim  >  Artikel  >  Web-Frontend  >  Umschaltschaltflächen: Semantisches HTML oder benutzerdefiniertes jQuery-Styling – was ist das Beste?

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

Barbara Streisand
Barbara StreisandOriginal
2024-10-31 19:14:02299Durchsuche

Toggle Buttons: Semantic HTML or Custom jQuery Styling - Which is Best?

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!

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