-
Notifications
You must be signed in to change notification settings - Fork 2
/
Tabs.js
33 lines (27 loc) · 934 Bytes
/
Tabs.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
export class Tabs {
constructor(containerSelector) {
this.container = document.querySelector(containerSelector);
this.buttons = this.container.querySelectorAll('.tab-button');
this.contents = document.querySelectorAll('.tab-content');
this.buttons.forEach((button) => {
button.addEventListener('click', () => {
this.showTab(button.getAttribute('data-tab'));
});
});
this.showTab(this.buttons[0].getAttribute('data-tab'));
}
showTab(tabId) {
this.contents.forEach((content) => {
content.style.display = 'none';
});
this.buttons.forEach((button) => {
button.classList.remove('active');
});
const tabContent = document.getElementById(tabId);
const tabButton = this.container.querySelector(`[data-tab="${tabId}"]`);
if (tabContent && tabButton) {
tabContent.style.display = 'block';
tabButton.classList.add('active');
}
}
}