28 lines
1.2 KiB
JavaScript
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");
|
|
});
|
|
});
|
|
});
|
|
});
|