JavaScript Tabs - Erstellen Tabbed Web-Seiten leicht
Klicken Sie auf den Link unten, um eine Registerkarte 'in Aktion zu sehen:
In diesem Tutorial erfahren Sie, wie diese Registerseite zusammengesetzt ist. Sie können dann den Code und Ideen verwenden, um Ihre eigenen Registerkarten Web-Seiten zu bauen. Lass uns anfangen!
Erstellen der HTML-Code für die Registerseite
Der HTML-Code für den Tabs und Inhalt ist sehr einfach. Sie speichern jeden Inhalt des Registerkarte innerhalb eines div-Elements mit einer Klasse von tabContent und einem eindeutigen ID Referenz. Hier ist der erste der drei Register Inhalt div s im Beispiel:
Die Tabs selbst sind Links einfach in einer ungeordneten Liste:
Sie können beliebig viele Tabs hinzufügen, wie Sie auf der Seite positionieren. Fügen Sie einfach einen neuen Inhalt div und gibt ihm eine eindeutige ID. fügen Sie dann einen Link, um es in der Registerkarten-Liste.
Erstellen der CSS
Einige CSS ist erforderlich, um die Tabs wie Tabs aussehen zu lassen (und machen sie schön zu sehen):
Diese CSS-Regeln funktionieren wie folgt:
Dieser Körper setzt eine schöne Schriftart und Schriftgröße für die Seite. ul Styles # Registerkarten Liste der Registerkarten, Aufzählungszeichen ausgeschaltet. UL # tabs li dem Display: inline; Eigenschaft macht die Registerkarten auf der Seite erscheinen. li a Styles die Links in der Liste ul # Registerkarten. Jede Verbindung ist gegeben einen Rand um jede Seite mit Ausnahme der Unterseite, so daß das aktive Register unten gut mit seinem Inhalt div mischt. li a ul # Registerkarten: Hover-Highlights eine Registerkarte, wenn Sie mit der Maus schwebte über. ul # tabs li a.selected eine ausgewählte Registerkarte Stile durch einen helleren Hintergrund und fett gedruckten Text, geben und es größer zu machen. Beachten Sie, dass die untere Polsterung erhöht wird, um 0.38em, um sicherzustellen, dass die Lasche mit dem Inhalt div einfügt. div.tabContent Legt einen Stil für den Tab Content-Bereiche, so dass sie auf die Registerkarte Design entsprechen. div.tabContent.hide verwendet, um nicht ausgewählt Tabs zu verstecken.
- Bringen Sie einen showTab () Onclick-Ereignishandler zu jedem der Registerkarte Links.
- Wie bitte Inhalt div s mit Ausnahme der ersten, so dass nur der Inhalt des äußersten linken Tab sichtbar ist, wenn die Seite geladen wird.
- Wenn eine Registerkarte geklickt wird, showTab () zeigt die aktuelle Registerkarte Inhalt, und blendet alle anderen Registerkarten Inhalt div s. Es unterstreicht auch die geklickt Reiter und dimmt die anderen Registerkarten.
Vier Funktionen steuern die Registerkarten:
- init () setzt die Laschen auf.
- showTab () zeigt eine geklickt Registerkarte Inhalt und hebt die Registerkarte.
- getFirstChildWithTagName () ist eine Hilfsfunktion, die das erste Kind eines gegebenen Elements abruft, die einen gegebenen Tag-Namen hat.
- getHash () ist eine weitere kurze Helferfunktion, die eine URL nimmt und gibt den Teil der URL, die nach der Raute (#) Zeichen erscheint.
Hier ist, wie diese Funktionen arbeiten.
Die Funktion init ()
Die erste und die meisten komplexe Funktion init (). Es ist, wenn die Seite geladen wird, durch das Körperelement des onload Ereignis aufgerufen:
Hier ist die Funktion selbst:
Diese Funktion tut 3 Dinge:
- Es durchläuft alle Li-Elemente in den Laschen ungeordneten Liste. Für jedes Element Li, ruft es die getFirstChildWithTagName () die Hilfsfunktion ein Verbindungselement innerhalb abzurufen. Dann ruft er die getHash () Helferfunktion den Teil der Verbindung der URL nach dem Hash zu extrahieren; Dies ist die ID des entsprechenden Inhalts-div. Das Verbindungselement wird dann durch ID in der tabLinks Array gespeichert, und der Inhalt wird durch div-ID in der contentDivs Array gespeichert.
- Er weist eine Onclick-Ereignis-Handler-Funktion showTab () zu den einzelnen Registerkarten Link genannt, und unterstreicht die ersten Reiter durch seine CSS-Klasse auf ‚ausgewählt‘.
- Es versteckt alle Inhalte div s mit Ausnahme des ersten von jeweils div ‚s CSS-Klasse‚tabContent verstecken‘zu setzen.
So dass init () ausgeführt wird, wenn die Seite geladen wird, stellen Sie sicher, dass Sie es als das Event-Handler onload Körperelement registrieren:
Die showTab () -Funktion
showTab () wird aufgerufen, wenn ein Tab Link geklickt wird. Sie weist auf die ausgewählten Registerkarte und die zugehörigen Inhalt div. Es dunkelt auch alle anderen Registerkarten und blendet alle anderen Inhalte div s:
Die Funktion extrahiert die ausgewählte ID aus dem href-Attribute des geklickt Link und speichern sie in SelectedID. Es macht dann eine Schleife durch alle IDs. Für die gewählte ID unterstreicht sie die entsprechenden Registerkarte und zeigt den Inhalt div; für alle anderen IDs dimmt es die Registerkarte und versteckt den Inhalt div. Es tut dies alles von CSS-Klassen auf den Tab Links und Inhalte div s einstellen.
Schließlich gibt die Funktion false der Browser nach dem Anklicken Link und Hinzufügen der Link auf die Browser-History zu verhindern.
Die getFirstChildWithTagName () -Funktion
Diese Hilfsfunktion gibt das erste Kind eines bestimmten Elements, das einen bestimmten Tag-Namen übereinstimmt. init () ruft diese Funktion auf, die eine (link) Element innerhalb jedes Listenelement in der Registerkarten Liste abzurufen.
Die Funktion Schleifen durch die untergeordneten Knoten des Elements, bis sie einen Knoten, der tagName Spiele findet. Sie gibt dann den Knoten.
Lernen Sie die childnodes und nodeName Eigenschaften in dem Artikel Blick ins Innere DOM Seitenelemente.
Die getHash () -Funktion
Die getHash () Helfer-Funktion gibt den Teil eines URL nach jedem Hash-Symbol. Wurde von init () und showTab (), um den Inhalt div-ID in einem Registerkarte Link verwiesen zu extrahieren.
Etwas zusammensetzen
Fühlen Sie sich frei, diesen Code in Ihren eigenen Web-Seiten zu verwenden. Glückliche tabbing!
Teile diese Seite
Das war sehr hilfreich, danke! Ich bin irgendwie neu in diesem, könnte jemand mir helfen, Übergänge zwischen den Tabs anwenden, wenn es Inhalte zeigt? Vielen Dank.
Sie können verschiedene Möglichkeiten nutzen, um Registerkarten und Registerkarte Inhalt zu erstellen.
Tab-Inhalte können nur hinzugefügt, wenn Tab Fokus erhält.
Sie können ausgewählte Registerkarte erinnern. Ausgewählte Tab öffnet immediatelly nach dem Öffnen der Seite.
Sie können Registerkarten innerhalb Registerkarte erstellen.
Benutzerdefinierte Hintergrund des Registerkarte zur Verfügung.
Stellen Sie eine Antwort
Schreiben Antworten müssen Sie Mitglied sein. Noch kein Mitglied? Die Anmeldung ist kostenlos, einfach und dauert nur eine Minute. Jetzt registrieren.