32 lines
1.4 KiB
JavaScript
32 lines
1.4 KiB
JavaScript
document.querySelectorAll('.tabsMain').forEach(tabsMain => {
|
|
const tabsTopElements = tabsMain.querySelectorAll('.tabsMainTopElement, .tabsMainTopElementAlt');
|
|
const tabsMidElements = tabsMain.querySelectorAll('.tabsMainMidElement');
|
|
|
|
tabsTopElements.forEach((tab, index) => {
|
|
tab.addEventListener('click', () => {
|
|
// Remove active class from all tabs and content
|
|
tabsTopElements.forEach(t => {
|
|
t.classList.remove('tabsMainTopElementActive');
|
|
t.classList.remove('tabsMainTopElementActiveAlt');
|
|
});
|
|
tabsMidElements.forEach(m => m.classList.remove('tabsMainMidElementActive'));
|
|
|
|
// Add active class to the clicked tab and corresponding content
|
|
tab.classList.add('tabsMainTopElementActive');
|
|
if (tab.classList.contains('tabsMainTopElementAlt')) {
|
|
tab.classList.add('tabsMainTopElementActiveAlt');
|
|
}
|
|
tabsMidElements[index].classList.add('tabsMainMidElementActive');
|
|
|
|
// Set active class on the parent tabsMain
|
|
tabsMain.classList.add('tabsMainActive');
|
|
// Remove active class from all other tabsMain
|
|
document.querySelectorAll('.tabsMain').forEach(otherTabsMain => {
|
|
if (otherTabsMain !== tabsMain) {
|
|
otherTabsMain.classList.remove('tabsMainActive');
|
|
}
|
|
});
|
|
});
|
|
});
|
|
});
|