41 lines
1.3 KiB
TypeScript
41 lines
1.3 KiB
TypeScript
// eslint-disable-next-line @eslint-community/eslint-comments/disable-enable-pair
|
|
/* eslint-disable unicorn/prefer-module */
|
|
|
|
;(() => {
|
|
const menuTabElements: NodeListOf<HTMLAnchorElement> =
|
|
document.querySelectorAll('.menu a')
|
|
|
|
const tabContainerElements: NodeListOf<HTMLElement> =
|
|
document.querySelectorAll('.tabs-container > div')
|
|
|
|
function selectTab(clickEvent: Event): void {
|
|
clickEvent.preventDefault()
|
|
|
|
// Remove .is-active from all tabs
|
|
for (const menuTabElement of menuTabElements) {
|
|
menuTabElement.classList.remove('is-active')
|
|
}
|
|
|
|
// Set .is-active on clicked tab
|
|
const selectedTabElement = clickEvent.currentTarget as HTMLAnchorElement
|
|
selectedTabElement.classList.add('is-active')
|
|
|
|
// Hide all but selected tab
|
|
const selectedTabContainerId = selectedTabElement.href.slice(
|
|
Math.max(0, selectedTabElement.href.indexOf('#') + 1)
|
|
)
|
|
|
|
for (const tabContainerElement of tabContainerElements) {
|
|
if (tabContainerElement.id === selectedTabContainerId) {
|
|
tabContainerElement.classList.remove('is-hidden')
|
|
} else {
|
|
tabContainerElement.classList.add('is-hidden')
|
|
}
|
|
}
|
|
}
|
|
|
|
for (const menuTabElement of menuTabElements) {
|
|
menuTabElement.addEventListener('click', selectTab)
|
|
}
|
|
})()
|