Wie erstelle ich Tabs mit CSS und JavaScript?

HTML „ Registerkarten „sind die Blöcke, die den Inhalt einer Website in Blöcken speichern. Diese werden verwendet, um die gespeicherten Inhalte mithilfe mehrerer Ansätze wie Mausklick, Doppelklick, Hover und vielem mehr anzuzeigen. Registerkarten bieten die einfachste Möglichkeit, durch die verschiedenen Webseiten einer Website zu navigieren. Darüber hinaus helfen sie dabei, den Platz zu verwalten und die Website attraktiver und auffälliger zu machen.

In dieser Anleitung wird erklärt, wie Sie Tabs mit CSS und JavaScript erstellen.

Wie erstelle ich Tabs mit CSS und JavaScript?

In diesem Abschnitt finden Sie eine Schritt-für-Schritt-Anleitung zur Erstellung von Tabs mit CSS und JavaScript.

Schritt 1: Erstellen Sie eine Tab-Struktur mit HTML

Schauen Sie sich zunächst den HTML-Code an, der die HTML-Tabs-Struktur erstellt:

< Div-ID = „Tab1“ onclick = 'Erste()' > Heim div >

< Div-ID = „Tab2“ onclick = 'zweite();' > Um div >

< Div-ID = „tab3“ onclick = 'dritte();' > Kontaktiere uns div >

< br />

< Div-ID = „cont1“ > Willkommen bei Linuxhint ! div >

< Div-ID = „cont2“ > TECHNOLOGIEBILDUNG

Wir haben viele Produkte entwickelt, die Ihnen dabei helfen, etwas über Linux, Programmierung, Informatik und mehr zu lernen.

div >

< Div-ID = „cont3“ >

Sie können unser Team unter editor AT linuxhint DOT com kontaktieren.

div >

In den obigen Codezeilen:

Der '
„Tag fügt ein div-Element mit der ID „tab1“ und einem angehängten „ hinzu onclick „Ereignis zum Ausführen des verknüpften“ Erste() ”-Funktion, wenn darauf geklickt wird. Dieses Element fungiert als HTML-Registerkarte.
Die obige Methode wird für die nächsten beiden div-Elemente ausgeführt.
Der '
”-Tag fügt einen Zeilenumbruch hinzu.
Der '
„Tag fügt erneut ein div-Element mit der zugewiesenen ID „cont1“ ein. Dieses Element zeigt den Inhalt der erstellten Registerkarte in einem Block an.
Die nächsten beiden“
„Tags fügen auch div-Elemente mit den ihnen zugewiesenen IDs hinzu.

Schritt 2: Tabs mit CSS gestalten

Wenden Sie nun die CSS-Stileigenschaften an, um die Registerkarten und deren Inhalte Ihren Wünschen entsprechend anzupassen:

< Stil >

#tab1, #tab2, #tab3 {

schweben : links ;

Polsterung : 5px 10px 5px 10px ;

Hintergrund : Orange Rot ;

Farbe : #FFFFFF ;

Marge : 0px 5px 0px 5px ;

Mauszeiger : Zeiger ;

Grenze - Radius : 3px ;

}

#tab1 : schweben, #tab2 : schweben, #tab3 : schweben {

Hintergrund : Grün ;

}

#cont1, #cont2, #cont3 {

Breite : 300px ;

Höhe : 100px ;

Polsterung : 40px ;

Schriftart - Größe : Mittel ;

Schriftart - Familie : „Times New Roman“ , Times, Serife ;

Grenze : 2px einfarbig orangerot ;

Grenze - Radius : 7px ;

Anzeige : keiner ;

}

Stil >

Im angegebenen Codeausschnitt:

Greifen Sie zunächst auf „ Registerkarten ” unter Verwendung der ihnen zugewiesenen IDs und passen Sie sie über die folgenden Stileigenschaften an (Float, Padding, Hintergrund, Farbe, Rand: 0px 5px 0px 5px, Cursor und Rahmenradius).
Als nächstes fügen Sie das „ schweben ”-Ereignishandler mit den Registerkarten, um ihre Hintergrundfarben zu ändern, wenn der Benutzer mit der Maus darüber fährt.
Greifen Sie danach auf „ Inhalt der Registerkarten ” wird in den div-Elementen gespeichert, deren IDs „cont1“, „cont2“ und „cont3“ sind. Wenden Sie nun die folgenden Stileigenschaften (Breite, Höhe, Abstand, Schriftgröße, Schriftfamilie, Rahmen, Rahmenradius und Anzeige) darauf an.

Schritt 3: Fügen Sie mithilfe von JavaScript Funktionen zu Registerkarten hinzu

Fügen Sie abschließend mithilfe von JavaScript Funktionen zu den erstellten Registerkarten hinzu:

< Skript >

Funktion zuerst ( ) {

dokumentieren. getElementById ( „cont1“ ) . Stil . Anzeige = 'Block' ;

dokumentieren. getElementById ( „cont2“ ) . Stil . Anzeige = 'keiner' ;

dokumentieren. getElementById ( „cont3“ ) . Stil . Anzeige = 'keiner' ;

}

Funktion Sekunde ( ) {

dokumentieren. getElementById ( „cont2“ ) . Stil . Anzeige = 'Block' ;

dokumentieren. getElementById ( „cont1“ ) . Stil . Anzeige = 'keiner' ;

dokumentieren. getElementById ( „cont3“ ) . Stil . Anzeige = 'keiner' ;

}

Funktion dritte ( ) {

dokumentieren. getElementById ( „cont3“ ) . Stil . Anzeige = 'Block' ;

dokumentieren. getElementById ( „cont1“ ) . Stil . Anzeige = 'keiner' ;

dokumentieren. getElementById ( „cont2“ ) . Stil . Anzeige = 'keiner'

}

Skript >

Die obigen Codezeilen:

Definieren Sie eine Funktion mit dem Namen „ Erste “.
In dieser Funktionsdefinition ist das „ document.getElementById() Die Methode greift auf das div-Element zu, dessen ID „cont1“ ist, und wendet die „ Stil „Immobilie mit einem“ Block ” Wert darauf. Diese Eigenschaft zeigt den Inhalt der Registerkarte an, auf die der Benutzer klickt.
Als nächstes greift „document.getElementById()“ auf ein anderes Div zu und wendet die Eigenschaft „style“ mit dem Wert „none“ an, um es auszublenden. Dadurch wird dieses Element auf der Webseite ausgeblendet.
Die obige Methode wird für die nächsten div-Elemente ausgeführt, auf die zugegriffen wird. Dies liegt daran, dass die „erste“ Funktion nur den Inhalt der Registerkarte anzeigt, deren „style“-Eigenschaftswert „block“ ist, und die anderen ausblendet.
Das obige Verfahren wird für die nächsten Funktionen „second()“ und „third()“ durchgeführt.

Ausgabe

Es ist ersichtlich, dass die Registerkarten erfolgreich erstellt wurden und beim Klicken des Benutzers ihren jeweiligen Inhalt anzeigen.

Abschluss

Um Registerkarten zu erstellen, erstellen Sie zunächst deren Strukturen mit „HTML“ und passen Sie sie dann mithilfe von CSS-Stileigenschaften an. Die Stileigenschaften werden hinzugefügt, ohne dass ein zusätzliches Stylesheet exportiert werden muss. Diese Eigenschaften machen die Tabs attraktiv und auffällig. Sobald die Registerkarten erstellt und angepasst sind, verwenden Sie die Programmiersprache JavaScript, um ihnen Funktionen hinzuzufügen. In dieser Anleitung wurde der komplette Vorgang zum Erstellen von Tabs mit CSS und JavaScript praktisch erklärt.

Wie erstelle ich Tabs mit CSS und JavaScript?