26 lines
1.2 KiB
JavaScript
26 lines
1.2 KiB
JavaScript
|
document.querySelectorAll('.tabsMain').forEach(tabsMain => {
|
||
|
|
const tabsTopElements = tabsMain.querySelectorAll('.tabsMainTopElement');
|
||
|
|
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'));
|
||
|
|
tabsMidElements.forEach(m => m.classList.remove('tabsMainMidElementActive'));
|
||
|
|
|
||
|
|
// Add active class to the clicked tab and corresponding content
|
||
|
|
tab.classList.add('tabsMainTopElementActive');
|
||
|
|
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');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|