So schreiben Sie Tabs in Javascript

Mit der Entwicklung des Internets sind Website-Oberflächen immer cooler geworden und Tabs sind zu einem der häufigsten UI-Elemente moderner Websites geworden. In diesem Artikel erfahren Sie, wie Sie mithilfe von JavaScript Tabs schreiben, um Ihre Website moderner zu gestalten.

1. HTML-Struktur

Zuerst müssen wir die Tab-Struktur in HTML erstellen. Sie können den folgenden Code verwenden:

 
 
Tab 1
 
Tab 2
 
Tab 3
 
 
Tab 1 content
 
Tab 2 content
 
Tab 3 content
 

Die obige HTML-Struktur enthält einen Tab-Container (Tab-Container), der eine Option für die Kartennavigation enthält Leiste (Tab-Navigation) und Tab-Inhalt (Tab-Inhalt). In einer Navigationsleiste ist jede Registerkarte ein Listenelement (tab-nav-item), und die aktuell ausgewählte Registerkarte kann durch Hinzufügen einer „aktiven“ Klasse angezeigt werden. Im Inhalt können Sie auch den Inhalt des aktuell ausgewählten Tabs angeben, indem Sie die Klasse „aktiv“ hinzufügen.

2. CSS-Stil

Als nächstes müssen wir Stile zu den Registerkarten und Inhalten hinzufügen. Sie können den folgenden Code verwenden:

.tab-container { display: flex; flex-direction: column; margin: 20px; border: 1px solid #ccc; border-radius: 4px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 6px; } .tab-nav { display: flex; justify-content: space-between; align-items: center; background: #eee; padding: 10px; } .tab-nav-item { cursor: pointer; padding: 10px; border-radius: 4px; transition: all 0.3s ease; } .tab-nav-item:hover { background: #fff; } .tab-nav-item.active { background: #fff; font-weight: bold; } .tab-content { padding: 20px; display: none; } .tab-content.active { display: block; }

Der obige CSS-Stil legt die Position, Größe, den Rahmen, den Schatten und andere Eigenschaften der Registerkarte fest Container und Stile für Navigationsleisten- und Registerkarteninhalte. Beachten Sie, dass die Anzeigeeigenschaft des Registerkarteninhalts auf „Keine“ eingestellt ist, sodass diese nur angezeigt wird, wenn die entsprechende Registerkarte ausgewählt ist.

3. JavaScript-Code

Schließlich müssen wir JavaScript-Code schreiben, damit der Tab-Schalter beim Klicken angezeigt wird. Sie können den folgenden Code verwenden:

const tabs = document.querySelectorAll('.tab-nav-item'); const contents = document.querySelectorAll('.tab-content'); for (let i = 0; i < tabs.length; i++) { tabs[i].addEventListener('click', function() { // 首先隐藏所有选项卡内容 for (let j = 0; j < contents.length; j++) { contents[j].classList.remove('active'); } // 设置当前选中的选项卡添加 "active" 类 for (let j = 0; j < tabs.length; j++) { tabs[j].classList.remove('active'); } this.classList.add('active'); contents[i].classList.add('active'); }); }

Der obige JavaScript-Code verwendet einen Ereignis-Listener, um die Funktion zum Umschalten des entsprechenden Tab-Inhalts zu implementieren, wenn auf die Tab-Navigationsleiste geklickt wird. Blenden Sie zunächst alle Registerkarteninhalte aus und legen Sie dann die aktuell ausgewählte Registerkarte und den entsprechenden Inhalt fest, um die Klasse „aktiv“ hinzuzufügen, um den Effekt der Anzeige der Registerkarteninhalte zu erzielen.

4. Vollständiger Code

Abschließend kombinieren wir den obigen HTML-, CSS- und JavaScript-Code, um den vollständigen Code wie folgt zu bilden:

      
  
 
 
Tab 1
 
Tab 2
 
Tab 3
 
 
Tab 1 content
 
Tab 2 content
 
Tab 3 content
 
   

Jetzt können Sie einen Tab-Tab selbst implementieren, indem Sie den obigen Code kopieren und einfügen, also Ihr Website ist moderner.

Das obige ist der detaillierte Inhalt vonSo schreiben Sie Tabs in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!