Tilda ist eine der beliebtesten Plattformen zum Erstellen und Hosten von Web-Ländern. Es bietet umfangreiche Möglichkeiten in Design und Funktionalität. Eines der wichtigsten Elemente beim Erstellen der Benutzeroberfläche sind Tabs, ein praktisches und effektives Tool zum Organisieren von Inhalten. In diesem Artikel erfahren Sie, wie Sie Tabs in einer Tilde platzieren können
1. Um mit Tabs zu beginnen, benötigen Sie ein Konto auf der Tilda-Plattform. Wenn Sie es nicht haben, registrieren Sie sich auf der offiziellen Website.
2. Nachdem Sie sich im System registriert und autorisiert haben, gehen Sie zum Editor Ihrer Website. Suchen Sie die gewünschte Seite und öffnen Sie sie zur Bearbeitung.
3. Wählen Sie im Editor den Block aus, in dem die Tabs platziert werden sollen. Klicken Sie dazu einmal darauf. Sie sehen ein Bedienfeld für Blöcke, in dem die Option "Tabs" verfügbar sein wird.
Was sind Tabs und wie funktionieren sie
Tabs werden bei der Auswahl von Tabs ausgeblendet und angezeigt. Wenn ein Benutzer auf eine der Registerkarten klickt, wird der entsprechende Inhaltsblock sichtbar und die anderen Blöcke werden ausgeblendet. Auf diese Weise können Sie nur die gewünschten Informationen anzeigen, während Sie die Seite sauber und sauber halten.
Mithilfe verschiedener Technologien wie HTML, CSS und JavaScript können Sie Tabs erstellen, die ansprechend und anpassungsfähig sind. Tabs können beispielsweise automatisch auf mobilen Geräten scrollen oder ihr Aussehen je nach Bildschirmauflösung ändern.
Vorteile der Verwendung von Tabs auf der Website
1. Einfache Navigation
Mit Tabs auf der Website können Sie Inhalte in verschiedene Abschnitte aufteilen und dem Benutzer eine einfache Navigation ermöglichen. Der Besucher kann leicht zwischen den Registerkarten wechseln, ohne die Ausrichtung auf der Seite zu verlieren und die benötigten Informationen leicht zu finden.
2. Sparen Sie Platz auf der Seite
Tabs benötigen viel weniger Platz auf einer Seite als andere Möglichkeiten, Informationen wie Akkordeons oder Dropdown-Listen darzustellen. Dies gilt insbesondere für mobile Geräte, bei denen der Platz auf dem Bildschirm begrenzt ist.
3. Einfach zu bedienen
Tabs sind eine intuitive Art, Informationen darzustellen. Benutzer haben sich bereits an dieses Format gewöhnt und können leicht verstehen, wie sie es verwenden. Darüber hinaus ermöglicht die Verwendung von Tabs die Organisation von Informationen strukturierter und erleichtert die Suche nach den gewünschten Inhalten.
4. Möglichkeit, Informationen auszublenden
Tabs ermöglichen es Ihnen, einen Teil des Inhalts auszublenden, der nicht auf den ersten Blick angezeigt wird. Dies reduziert die anfängliche Belastung der Seite, verbessert die Ladegeschwindigkeit und erleichtert das Verständnis von Informationen für den Benutzer.
5. Verbesserte Benutzerfreundlichkeit
Die Verwendung von Tabs auf der Website verbessert die Benutzerfreundlichkeit. Sie machen die Seite intuitiver, vereinfachen die Suche nach Inhalten und helfen dem Benutzer, schnell auf der Website zu navigieren.
6. Optimierung für Suchmaschinen
Mit Tabs können Sie Inhalte in verschiedene Abschnitte aufteilen, was die Seitenoptimierung für Suchmaschinen erleichtert. Verschiedene Registerkarten können einzelne Schlüsselwörter oder Themen enthalten, die für Suchmaschinen besser sichtbar sind.
Schritt 1. HTML-Code für Tabs erstellen
Bevor Sie HTML-Code für Tabs erstellen, müssen Sie sich mit der Struktur und dem Inhalt von Tabs vertraut machen. Jedes Tab wird als separates Listenelement dargestellt
Hier ist ein Beispielcode zum Erstellen einer Tab-Liste:
In diesem Beispiel erstellen wir eine Liste von Tabs mit drei Elementen. Das erste Taba-Element hat die Klasse "active", um anzugeben, dass es standardmäßig ausgewählt ist.
Sie können den Inhalt von Tabs ändern, indem Sie einen internen HTML-Code zwischen dem öffnenden und dem schließenden Tag hinzufügen
- . Sie können beispielsweise ein Bild oder einen Text hinzufügen:
In diesem Beispiel enthält die erste Registerkarte das Bild "tab1.jpg" und das zweite Tab enthält den Text "Text Tab 2". Abhängig von Ihrem Design und Ihren Anforderungen können Sie Tabs mit HTML-Code ergänzen.
Schritt 2. Hinzufügen von Stilen für Tabs
Nachdem wir die Tabs-Struktur erstellt haben, müssen wir Stile hinzufügen, um sie attraktiv und funktional aussehen zu lassen. Das Aussehen von Tabs kann mit CSS angepasst werden.
Sie müssen Stilklassen für die aktiven und inaktiven Registerkarten erstellen. Zum Beispiel können Sie Klassen verwenden .active und .inactive.
Mit diesen Klassen können Sie den Hintergrund, die Schriftfarbe und andere Eigenschaften der Registerkarten anpassen. Zum Beispiel:
.active .inactiveSie können auch CSS-Selektoren verwenden, um die Stile für die ausgewählte Registerkarte zu ändern. Sie können beispielsweise eine Stilklasse hinzufügen .für die ausgewählte Registerkarte ausgewählt und spezifische Stile darauf anwenden:
.selectedVergessen Sie nicht, dass diese Stile Ihrer CSS-Datei oder dem Stilblock Ihrer Webseite hinzugefügt werden müssen. Es ist auch wichtig sicherzustellen, dass die Stilklassen im HTML-Code korrekt auf Ihre Tabs angewendet werden.
Nach dem Hinzufügen von Stilen sollten Tabs ästhetisch und benutzerfreundlich aussehen und die Funktionalität haben, um zwischen Tabs zu wechseln.
Schritt 3. Schreiben von Funktionen zum Umschalten von Tabs
Um Tab-Switching-Funktionalität zu implementieren, müssen wir JavaScript-Code schreiben. Wir erstellen eine Funktion, die die ID des aktiven Tabs als Argument akzeptiert und auf dieser Grundlage die entsprechenden Klassen setzt, um den Inhalt des ausgewählten Tabs anzuzeigen.
So können Sie dies tun:
-
Zuerst erhalten wir alle Elemente mit der Klasse "tab-content" und speichern sie in einer Variablen:
let tabContents = document.getElementsByClassName('tab-content');
function switchTab(tabId) >>
Jetzt, da wir eine Funktion zum Wechseln von Tabs haben, können wir sie aufrufen, wenn wir auf jeden Tabs klicken. Fügen Sie dazu jedem Element mit der Klasse "tab" einen "click" -Ereignishandler hinzu:
let tabs = document.getElementsByClassName('tab');for (let i = 0; i < tabs.length; i++) );>
Jetzt haben wir eine funktionierende Funktion, um Tabs zu wechseln! Wenn Sie auf ein Tab klicken, wird nur der Inhalt des ausgewählten Tabs angezeigt, und die anderen Tabs werden ausgeblendet.
Beispiel für die Verwendung von Tabs auf einer Website
Tabs sind eine bequeme Möglichkeit, auf einer Webseite zu navigieren. Sie ermöglichen es Ihnen, Inhalte als Registerkarten zu platzieren, sodass der Benutzer schnell zwischen den verschiedenen Informationsabschnitten auf der Seite wechseln kann.
Hier ist ein Beispiel für die Verwendung von Tabs auf der Website:
HTML-Markup:
Содержимое вкладки 1
Это первая вкладка с информацией.
Содержимое вкладки 2
Это вторая вкладка с информацией.
Содержимое вкладки 3
Это третья вкладка с информацией.
CSS-Stile:
.tabs overflow: hidden;>.tablink background-color: #f2f2f2;border: none;outline: none;cursor: pointer;padding: 14px 16px;transition: 0.3s;font-size: 17px;>.tablink:hover background-color: #ddd;>.tabcontent display: none;padding: 6px 12px;border: 1px solid #ccc;border-top: none;>
function openTab(evt, tabName) var i, tabcontent, tablinks;tabcontent = document.getElementsByClassName("tabcontent");for (i = 0; i < tabcontent.length; i++) tabcontent[i].style.display = "none";>tablinks = document.getElementsByClassName("tablink");for (i = 0; i < tablinks.length; i++) tablinks[i].className = tablinks[i].className.replace(" active", "");>document.getElementById(tabName).style.display = "block";evt.currentTarget.className += " active";>document.getElementById("defaultOpen").click();
In diesem Beispiel haben wir einen Container , in dem sich die Registerkartentasten ( ) und der Inhalt der Registerkarten ( ) befinden. Im HTML-Markup fügen wir Schaltflächen für jede Registerkarte und den entsprechenden Inhalt hinzu. Mit CSS-Stilen stilisieren wir die Tab-Schaltflächen und verbergen den Inhalt der Tabs. In einem JavaScript-Skript fügen wir eine openTab-Funktion hinzu, die wir aufrufen, wenn Sie auf eine Tab-Schaltfläche klicken, um den entsprechenden Inhalt anzuzeigen.
Mit dieser Implementierung von Tabs auf einer Website kann der Benutzer problemlos zwischen verschiedenen Informationsabschnitten wechseln, ohne dass die Seite neu geladen werden muss.
