2025-04-22 12:39:49 +03:00

28 lines
1.2 KiB
JavaScript

document.addEventListener("DOMContentLoaded", function() {
const tabComponents = document.querySelectorAll('[tabSys]');
tabComponents.forEach(tabComponent => {
const tabSelectors = tabComponent.querySelectorAll('[tabSys-Selector] > button')
const tabContents = tabComponent.querySelectorAll('[tabSys-Content] > div');
tabSelectors.forEach((selector, index) => {
selector.addEventListener('click', () => {
// Remove active classes from all selectors and hide all contents
tabSelectors.forEach((s) => {
s.classList.remove("bg-btnMain","text-textMain");
s.classList.add("hover:bg-btnMain/75","text-textMain2");
});
tabContents.forEach((content) => {
content.classList.add("hidden");
});
// Add active classes to the clicked selector and show the corresponding content
selector.classList.add("bg-btnMain","text-textMain");
selector.classList.remove("hover:bg-btnMain/75", "text-textMain2");
tabContents[index].classList.remove("hidden");
});
});
});
});