Change language
Python.Engineering Wiki Javascript-Tabs

Javascript-Tabs

__main__ Python module | absolute | Bootstrap JavaScript library | code Python module | COM PHP module | Ctype PHP module | dis Python module | Ev PHP module | html Python module | iat | io Python module | JavaScript | jQuery JavaScript library | os Python module | parallel PHP module | pty Python module | Python Development | Python functions | Radius PHP module | re Python module | select Python module | site Python module | SPL PHP module | StackOverflow | time Python module | UI PHP module
Michael Zippo Michael Zippo 04.11.2021

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:


Im " tabs" ein und rufen jedes mit einer tab-Klasse auf. Dies stellt jede der vier Karten dar, die wir heute schreiben werden. Es enthält unseren Eintrag, Registerkartenbeschriftungen und Registerkarteninhalte. Lassen Sie uns leere Container für all diese erstellen:

< /html>

Innerhalb des Inhaltsklassennamens steht unser Inhalt. Sie können beliebige Inhalte verwenden, aber es ist üblich, die zugehörigen Inhalte in einem Tab zu verwenden

Zeit, mit CSS zu beginnen:

Wenn es darum geht, CSS zu schreiben, beginne mit dem größten Container und arbeite dich bis zum kleinsten Container vor, hier ist das Minimum, das wir tun müssen, um es zu erledigen. work:

  1. Setzen Sie einen generischen Selektor auf eine Kalibrierungsbox . border-box
  2. Im Hauptcontainer muss die display-Eigenschaft auf flex und position auf relative gesetzt sein. Display: Flex ermöglicht es, Karten nebeneinander in einer Reihe zu platzieren, und die relative Position fungiert daher als Grenze oder Zaun, der den Inhalt der Karte enthält.

An dieser Stelle Sie sehen, was wie vier Textblöcke mit einem Schaltflächen-Radio und etwas Inhalt aussieht, also müssen wir einen Weg finden, den ausgewählten Block anzuzeigen und die anderen Blöcke auszublenden.


  1. In der .tab container , werden wir den Stil des Labels korrigieren:.
    1. 1 Pixel durchgehender Rand in einer gewünschten Farbe
    2. Padding: 5 Pixel, 10 Pixel - fügt Platz um den Etikettentext hinzu
    3. 10 Pixel border-radius , 10 Pixel, 0 Pixel, 0 Pixel - Dadurch sieht das Etikett eher wie eine traditionelle Karte aus.

Wenn Sie Ihre Arbeit jetzt überprüfen, werden Sie sehen, dass die Etiketten die runden Optionsfelder haben zu ihrer Linken. Es sieht also eher wie ein herkömmlicher Tab aus, aber um das ausgewählte Attribut der Schaltfläche weiterhin beizubehalten, müssen wir den kreisförmigen Teil der Optionsschaltfläche ausblenden.

  1. Um die Schaltfläche tatsächlich auszuwählen, müssen wir Verwenden Sie .tab [type = `radio`]. Um es zu verbergen, haben wir eine beispiellose Anzeige eingebaut.

Also müssen wir den eigentlichen Inhalt so angehen, dass er jeweils nur einen Tab anzeigt.

  1. Wählen Sie den div-Inhalt aus und stellen Sie dann die absolute Position auf ein. Wenn die absolute Position festgelegt ist, kann das div im relativen Elternelement festgelegt werden. Mit up, right, left und bottom können Sie den Inhalt beliebig im übergeordneten div festlegen. Setzen Sie in diesem Fall die Eigenschaften left und right auf 0. Wir möchten auch einen Rahmen erstellen und eine Hintergrundfarbe auf eine nicht transparente Farbe setzen.
  1. Anpassen der z- Index der ausgewählten Registerkarte bringt das Bedienfeld dieser Registerkarte in den Vordergrund. Wählen Sie dazu die ausgewählte Schaltfläche und deren Inhalt aus. Verwenden Sie dazu uns [type = `radio`]: selected ~ label ~ .content. Das "~" zwischen Elementen in CSS sagt uns, dass wir die Inhaltsklasse wollen, die nach einem Label-Element erscheint, das nach einem ausgewählten Optionsfeld erscheint.
    1. Um die aktive Registerkarte anzuzeigen, set [type = `radio`]: selected ~ label auf eine andere Hintergrundfarbe setzen.

      2. Wenn der Benutzer jetzt auf die einzelnen Registerkarten klickt, sollte er zwischen ihnen wechseln können, ohne den Inhalt der anderen Bedienfelder zu sehen . Dies ist das Minimum, das für die Navigationsregisterkarten bei der Arbeit erforderlich ist. Versuchen Sie, mit CSS zu spielen, um den Stil zu ändern! Eine Auftragsarbeit der Arbeit ist oben - unten codiert: