Webentwickler sind oft mit der Notwendigkeit konfrontiert, Benutzeroberflächen zu erstellen, die Registerkarten enthalten. Mit Registerkarten können Sie Informationen auf einer Seite so organisieren, dass der Benutzer problemlos zwischen verschiedenen Inhaltssektionen oder -kategorien wechseln kann.
Die Verwendung von Tabs in HTML kann besonders für angehende Entwickler einfach genug sein. Obwohl es viele Möglichkeiten gibt, Tabs zu erstellen, besteht die gängigste Lösung darin, JavaScript und CSS zu verwenden.
Der Prozess zum Erstellen von Tabs in HTML umfasst mehrere Schritte. Zuerst müssen Sie für jede Registerkarte ein Markup erstellen. Anschließend müssen Sie Stile hinzufügen, um zwischen aktiven und inaktiven Registerkarten visuell zu unterscheiden. Zum Abschluss fügen Sie ein Skript hinzu, das Klickereignisse verarbeitet, um zwischen den Registerkarten zu wechseln.
Wenn Sie dieser einfachen Anleitung folgen, kann selbst ein HTML-Neuling Tabs auf seiner Webseite erstellen. Die Kenntnis der Grundlagen von HTML und CSS macht es einfach, eine interaktive Benutzeroberfläche mit Registerkarten zu entwickeln. Machen Sie Ihre Seite mit Tabs bequemer und organisierter!
Wie erstelle ich Tabs in HTML
Zuerst werden wir eine HTML-Struktur für Tabs erstellen. Dafür benötigen wir einen Container (normalerweise
), in dem sich der Titel und der Inhalt jeder Registerkarte befinden. Jede Registerkarte wird durch einen separaten Block mit einer Überschrift und dem entsprechenden Inhalt dargestellt.
Hier ist ein Beispiel für einen HTML-Strukturcode für drei Registerkarten:
Вкладка 1
Содержимое вкладки 1
Вкладка 2
Содержимое вкладки 2
Вкладка 3
Содержимое вкладки 3
Jede Registerkarte wird durch ein Element mit der Klasse "tab" dargestellt. Der Tab-Titel wird mit einem Element mit der Klasse "tab-title" angegeben, und der Tab-Inhalt wird mit einem Element angegeben
mit der Klasse "tab-content".
Als nächstes fügen wir CSS-Stile hinzu, um einen Wechseleffekt zwischen den Registerkarten zu erzeugen:
In diesem Beispiel verwenden wir CSS-Stile, um alle Registerkarten außer den aktiven Registerkarten auszublenden. Wenn der Benutzer auf den Tab-Titel klickt, fügen wir dem entsprechenden Element eine Klasse "active" hinzu , um dessen Inhalt anzuzeigen.
Um die Tabs funktionsfähig zu machen, benötigen wir ein wenig JavaScript-Code. Fügen Sie dem Abschnitt Ihrer HTML-Datei den folgenden Code hinzu:
var tabs = document.getElementsByClassName('tab');var tabTitles = document.getElementsByClassName('tab-title');for (var i = 0; i < tabTitles.length; i++) document.getElementById(tabId).classList.add('active');>);>
Dieser Code fügt jedem Tab-Header einen "Click" -Ereignishandler hinzu. Wenn der Benutzer auf den Titel klickt, finden wir den entsprechenden Tab-Container nach dem Attribut "data-tab" und fügen ihm die Klasse "active" hinzu.
Nachdem Sie nun HTML und CSS für die Registerkarten sowie JavaScript hinzugefügt haben, damit sie funktionieren, sollten Ihre Registerkarten funktionieren! Wenn Sie auf den Tabtitel klicken, sollte der entsprechende Inhalt dem Benutzer angezeigt werden.
Experimentieren Sie mit dem Code, um das Aussehen und die Funktionalität der Registerkarten an Ihre Bedürfnisse anzupassen. Sie können CSS-Stile verwenden, um Animationseffekte hinzuzufügen oder Farben und Schriftarten zu ändern. Sie können auch weitere Registerkarten hinzufügen oder den Text der Registerkarten und ihren Inhalt ändern.
Hoffentlich war dieses Handbuch hilfreich und hat Ihnen geholfen, Tabs in HTML zu erstellen. Viel Glück für Sie!
Ein einfacher Leitfaden für Anfänger
-
und
- um eine Liste von Registerkarten zu erstellen. Jede Registerkarte wird durch ein separates Element dargestellt
- .
Zusätzlich zu Styling und Inhalt können Sie in Ihrem HTML-Markup ein Tab-Auswahlereignis definieren, das an andere Funktionen gebunden werden kann. Dadurch können Sie beschreiben, was bei der Auswahl einer Registerkarte passieren soll, und Ihre Seite interaktiv gestalten. Alle anderen Details zum Styling und zur Funktionalität der Registerkarten können mit CSS und JavaScript angepasst werden.
Schritt 1: HTML-Markup
Bevor wir mit dem Erstellen von Tabs fortfahren, müssen wir zuerst unsere HTML-Seite markieren. Sie benötigen mehrere Elemente, um den Hauptcontainer der Registerkarten und die Registerkarten selbst zu erstellen.
Der Hauptcontainer für Registerkarten ist das Element . Sie können eine Klasse oder eine ID darauf anwenden, um sie in JavaScript zu stylen oder zu identifizieren.
-
oder
. Sie können verwenden
-
für eine ungeordnete Liste oder
für eine geordnete Liste.
Erstellen einer Hauptstruktur
Bevor Sie mit dem Erstellen von Registerkarten beginnen, müssen Sie die grundlegende HTML-Struktur des Dokuments erstellen. Es besteht aus einem Container für die Registerkarten und die Registerkarten selbst.
Um einen Container zu erstellen, verwenden wir ein Tag . Neben dem Tag werden wir auch die Klasse "tabs" für ein besseres Styling verwenden. So wird es aussehen:
Als nächstes verwenden wir für jeden Tab ein Tag . Jede Schaltfläche hat ihre eigene eindeutige ID, die uns später hilft, die Schaltflächen mit dem Inhalt der Registerkarten zu verknüpfen. So wird es aussehen:
Anmerkung: Sie können so viele Tabs hinzufügen, wie Sie benötigen, wiederholen Sie das Tag einfach die gewünschte Anzahl von Malen.
So wird die vollständige HTML-Struktur eines Dokuments aussehen, das einen Container und Registerkarten enthält:
Schritt 2: CSS anwenden
Zunächst erstellen wir einen separaten Block für CSS-Stile. Wir können diese Stile innerhalb eines Tags innerhalb des Tags unseres HTML-Dokuments festlegen oder eine separate Datei mit Stilen erstellen und sie mit einem Tag verbinden.
Beginnen wir mit dem Erstellen von Stilen für unsere Tabs. Wir können Klassen oder IDs verwenden, um relevante Elemente in HTML auszuwählen. Zum Beispiel können wir jeder Registerkarte eine Klasse "tab" hinzufügen:
Jetzt können wir in unserem CSS-Block Stile für diese Klasse anwenden:
.tab
background-color: #ccc;
color: #333;
padding: 10px;
Die Registerkarte hat jetzt einen grauen Hintergrund, schwarzen Text und Einrückungen.
Wir können auch Pseudoklassen verwenden, um den Stil der Registerkarten beim Hover oder Klicken zu ändern. Zum Beispiel können wir eine Pseudoklasse ":hover" neben der Klasse "tab" hinzufügen, um den Stil zu ändern, wenn Sie den Mauszeiger über eine Registerkarte bewegen:
.tab:hover
background-color: #555;
color: #fff;
Wenn Sie nun den Mauszeiger über eine Registerkarte bewegen, ändern sich der Hintergrund und die Farbe des Textes.
Wenn wir ähnliche Stile auf jede Registerkarte anwenden, können wir visuell ansprechende und interaktive Tabs in HTML erstellen.
Hinzufügen von Stilen zu Registerkarten
Nachdem wir eine HTML-Struktur für unsere Tabs erstellt haben, müssen wir Stile hinzufügen, damit sie wie Tabs aussehen.
-
und
. Der Tab-Container selbst könnte ungefähr so aussehen:
.tabs .tabs li .tabs li:last-child .tabs li.active
Der oben beschriebene CSS-Code setzt zuerst die Standardstile zurück und legt einige allgemeine Stile für den Registerkartencontainer fest. Anschließend werden die Stile für jedes einzelne Registerkartenelement angegeben.
Wir setzen eine Liste ohne Marker mit Einzug und einem Nullfeld. Eigenschaften display: flex; , justify-content: center; und align-items: center; zentriert die Registerkarten horizontal und vertikal.
Die Stile für jedes Registerkartenelement bestimmen sein Aussehen und seinen Status. Wir legen den Mauszeiger, die Schriftart, den Einzug und die Grenzen fest. Das letzte Element jeder Registerkarte hat keinen rechten Rand, um die Sichtbarkeit einer geschlossenen Registerkarte zu erstellen.
Wenn der Benutzer eine Registerkarte aktiviert, ändern wir den Hintergrund, den unteren Rand und die Schriftfarbe, um einen Aktivitätseffekt zu erzeugen.
