In questo articolo vedremo come evidenziare la voce corrente di un menu a tab con JavaScript.
Si tratta di rimuovere inizialmente la classe CSS che evidenzia il link da tutte le voci del menu e successivamente aggiungerla solo al link su cui si รจ effettuato il click o il tap.
'use strict';
const handleTabMenu = ({ menu, activeClass, itemElems }) => {
const items = menu.querySelectorAll(itemElems);
const resetItems = () => {
for(const item of items) {
item.classList.remove(activeClass);
}
};
for(const menuItem of items) {
menuItem.addEventListener('click', e => {
e.preventDefault();
resetItems();
const currentItem = e.target;
currentItem.classList.add(activeClass);
}, false);
}
};
Esempio d'uso:
handleTabMenu({
menu: document.getElementById('tab-menu'),
activeClass: 'active',
itemElems: '.tab-link'
});