55 lines
1.4 KiB
JavaScript
55 lines
1.4 KiB
JavaScript
// Tabs Component
|
|
export class Tabs {
|
|
constructor(onTabChange) {
|
|
this.navTabs = document.querySelectorAll('.nav-tab');
|
|
this.docsTab = document.getElementById('docsTab');
|
|
this.courseTab = document.getElementById('courseTab');
|
|
this.onTabChange = onTabChange;
|
|
this.init();
|
|
}
|
|
|
|
init() {
|
|
this.navTabs.forEach(tab => {
|
|
tab.addEventListener('click', () => {
|
|
const tabName = tab.dataset.tab;
|
|
this.switchTab(tabName);
|
|
});
|
|
});
|
|
}
|
|
|
|
switchTab(tabName) {
|
|
// Update active tab
|
|
this.navTabs.forEach(t => t.classList.remove('active'));
|
|
const activeTab = Array.from(this.navTabs).find(t => t.dataset.tab === tabName);
|
|
if (activeTab) {
|
|
activeTab.classList.add('active');
|
|
}
|
|
|
|
// Show/hide tab content
|
|
if (tabName === 'docs') {
|
|
if (this.docsTab) {
|
|
this.docsTab.style.display = 'flex';
|
|
this.docsTab.classList.add('active');
|
|
}
|
|
if (this.courseTab) {
|
|
this.courseTab.style.display = 'none';
|
|
this.courseTab.classList.remove('active');
|
|
}
|
|
} else {
|
|
if (this.docsTab) {
|
|
this.docsTab.style.display = 'none';
|
|
this.docsTab.classList.remove('active');
|
|
}
|
|
if (this.courseTab) {
|
|
this.courseTab.style.display = 'flex';
|
|
this.courseTab.classList.add('active');
|
|
}
|
|
|
|
if (this.onTabChange) {
|
|
this.onTabChange(tabName);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|