Projekt 02 – Javascript

const navLinks = document.querySelectorAll('nav ul li a');
const currentPage = window.location.pathname.split('/').pop() || 'index.html';
navLinks.forEach((link) => {
    const linkPage = link.getAttribute('href').split('/').pop();
    if (linkPage === currentPage) {
        link.classList.add('active');
    }
});

const navLinks = document.querySelectorAll('nav ul li a');
const currentPage = window.location.pathname.split('/').pop() || 'index.html';
navLinks.forEach((link) => {
    const linkPage = link.getAttribute('href').split('/').pop();
    if (linkPage === currentPage) {
        link.classList.add('active');
    }
});

Med denna kod matchar jag på alla list element i navbar. Javascriptet kollar vilken sida som är aktiv och jämför med länkarna i navbar. När den får en träff sätter den class=”active” i den html kod som den läser in för sidan man är på. Detta är ett skalbart alternativ till att sätta klassen på varje HTML fil.

När används det? Det används när sidan läses in.

Hur påverkas användaren? Det blir lättare att se vilken sida man befinner sig på.