CSS-Tabs eignen sich hervorragend, um zusammengehörige Informationen an einem einfach zu navigierenden Ort anzuzeigen. Sie sehen im Grunde wie Trennwände mit Laschen aus, die Sie in einer Rezeptbox oder einem Ordner sehen würden. Beispiele für Websites, die die Navigationsregisterkarten verwenden:
Wenn Sie sich diese beiden Websites ansehen, denken Sie an die Vorteile der Verwendung einer solchen Komponente der Benutzeroberfläche auf Websites. Welche Probleme gilt es zu lösen? Welche Art von Informationen wären die Navigationsregisterkarten, die eine gute Entwicklungsarbeit darstellen?
Wenn Sie nach einem Baum der Benutzeroberfläche greifen müssen, der den Text oder die Informationen in sinnvolle Komponenten organisiert und ohne sie auf dem Bildschirm anzeigt zu viel Platz einnehmen, sind die Navigationsregisterkarten eine kluge Wahl. Wir werden ausführlicher über die Navigationsregisterkarten sprechen, wenn wir anfangen, JavaScript, jQuery und / oder Bootstrap zu verwenden, aber es gibt auch eine formale Arbeit, die wir verwenden könnten, die nur reines HTML und CSS erfordert. Werfen wir einen Blick auf die Konfiguration:
Konfigurieren Sie Ihren HTML-Code:
Fahren Sie fort und konfigurieren Sie Ihr Standard-HTML mit einem Container innerhalb des Körpers, der als Hauptcontainer für das Projekt fungiert . Sie können es im class-Attribut beliebig benennen, aber ich nenne es class = "tabs". Bisher sollte Ihr HTML-Code so aussehen:
