So erstellen Sie eine Responsive-Tab-Komponente mit CSS und einem Hauch von JavaScript

In diesem Lernprogramm erfahren Sie, wie Sie eine responsive Tab-Komponente mit CSS und etwas JavaScript erstellen. Es ist absolut möglich, reine CSS-Tab-Komponenten zu erstellen. In diesem Beispiel setzen wir unsere JavaScript-Kenntnisse in die Praxis um.

In wenigen großen Schritten bauen wir Folgendes auf:

HinweisHinweis: In diesem Lernprogramm wird nicht darauf eingegangen, wie die Registerkartenkomponente zugänglich gemacht werden kann. Die Erkundung der Barrierefreiheit wäre sicherlich ein guter nächster Schritt.

1. Das HTML

Beginnen wir mit dem erforderlichen Markup. Wir haben einen Container, der die Registerkarten selbst (Listenelemente) sowie den Inhalt der einzelnen Registerkarten (Registerkartenbereiche) enthält. Um eine Registerkarte mit dem entsprechenden Fenster zu verknüpfen, verwenden Sie die Datenindex benutzerdefiniertes Attribut, das einen eindeutigen Wert für jedes Registerkartenfeld enthält. Das heißt, wegen der Zero-basierten Nummerierung ein Panel mit Datenindex = 0 Dem ersten Tab ist ein Panel mit zugeordnet Datenindex = 1 ist mit dem zweiten verbunden und so weiter.

Hier ist das HTML-Markup:

   Teil 1 
  Teil 2 
  Teil 3

2. Das CSS

Als nächsten Schritt geben wir einige CSS-Regeln für unsere Komponente an. Nichts Besonderes, nur einige Grundstile. Zu beachten ist, dass wir keine Übergänge verwenden (z. B. Überblenden, Schieben), um zwischen den Registerkarten zu wechseln. Stattdessen erscheinen und verschwinden diese mit einem einfachen Ein / Aus-Schalter.

Hier sind die Anfangsstile:

.Tabs-Container max-width: 1000px; Marge: 50px auto; Polsterung: 25px;  .tabs display: flex;  .tabs li: nicht (: letztes Kind) margin-right: 7px;  .tabs li a display: block; Position: relativ; oben: 4px; Polsterung: 10px 25px; Grenzradius: 2px 2px 0 0; Hintergrund: weiß; Deckkraft: 0,7; Übergang: alle 0,1s Easy-In-Out;  .tabs li.active a, .tabs li a: hover Deckkraft: 1; oben: 0;  .tabs-content position: relativ; z-Index: 2; Polsterung: 25px; Grenzradius: 0 4px 4px 4px; Hintergrund: weiß;  .tabs-panel display: none;  .tabs-panel.active Anzeige: Block;

3. Das JavaScript

Wenn HTML und CSS vorhanden sind, ist es an der Zeit, den erforderlichen JavaScript-Code anzusehen.

Jedes Mal, wenn wir auf eine Registerkarte klicken, machen wir Folgendes:

Entferne das aktiv Klasse aus der entsprechenden Registerkarte (standardmäßig die erste) und dem zugehörigen Registerkartenbereich (standardmäßig die erste).

Finden Sie das li Übergeordnetes Element dieser Registerkarte, fügen Sie das hinzu aktiv Klasse an, und seinen Index abrufen.

Suchen Sie den Tab-Bereich, dessen Attributwert (für den Datenindex Attribut) stimmt mit dem oben genannten Indexwert überein und ordnet das aktiv Klasse dazu.

Hier ist der resultierende JavaScript-Code:

const tabLinks = document.querySelectorAll (". tabs a"); const tabPanels = document.querySelectorAll (". tabs-panel"); for (let el of tabLinks) el.addEventListener ("click", e => e.preventDefault (); document.querySelector ('. tabs li.active'). classList.remove ("active"); document. querySelector ('. tabs-panel.active'). classList.remove ("aktiv"); const parentListItem = el.parentElement; parentList.classList.add ("active"); const index = [… parentListItem.parentElement.children] .indexOf (parentListItem); const panel = [… tabPanels] .filter (el => el.getAttribute ("data-index") == index); panel [0] .classList.add ("active");) ;

4. Gehen Sie responsiv

Unsere Komponente ist fast fertig! Das letzte, was wir tun müssen, ist, die Komponente ansprechbar zu machen. Wenn das Ansichtsfenster beispielsweise eine maximale Breite von 600 Pixel hat, sollte es zusammenfallen und folgendermaßen aussehen:

Da wir einen Desktop-First-Ansatz verwenden, sind dies die CSS-Regeln, die wir überschreiben müssen:

@media screen und (max-width: 600px) .tabs flex-direction: column;  .tabs li width: 100%;  .tabs li: nicht (: letztes Kind) margin-right: 0;  .tabs li a border-radius: 0; Deckkraft: 1; oben: 0;  .tabs li.active a :: before content: '•'; Polsterung rechts: 5px;  .tabs-content border-radius: 0;

5. Browserunterstützung

Unsere Demo funktioniert gut mit allen aktuellen Browsern und Geräten. Wie in meinen Tutorials üblich, verwenden wir Babel, um den ES6-Code auf ES5 herunterzukompilieren.

Fazit

In diesem kurzen Tutorial haben wir es geschafft, eine nützliche responsive Tab-Komponente mit HTML, CSS und JavaScript zu erstellen. Auch hier ist diese Komponente nicht richtig zugänglich, aber wenn Sie die Funktionalität verbessern möchten, wäre dies ein guter nächster Schritt. Glückliche Kodierung!

Web-Design