JavaScript: evidenziare la voce corrente di un menu a tab

JavaScript: evidenziare la voce corrente di un menu a tab

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'
});
Torna su