JavaScript: usare gli hash degli URL a scopo dinamico

In JavaScript possiamo sfruttare gli hash degli URL per scopi dinamici.

Supponiamo di aver implementato un pannello di controllo basato sui tab. Ad ogni refresh della pagina o ad ogni nuovo caricamento vogliamo poter selezionare sempre il tab corrente. Quindi useremo un URL come https://admin.sito/#tab-1. In JavaScript avremo:

'use strict';

const setCurrentTab = hash => {
    let tab = document.querySelector(hash);
    if(tab) {
        Array.prototype.forEach.call(document.querySelectorAll('.tab'), element => {
            element.style.display = 'none';
        });

        tab.style.display = 'block';
    }
};

document.addEventListener('DOMContentLoaded', () => {
    if(location.hash) {
        setCurrentTab(location.hash);
    }
});

Se effettuiamo degli upload senza AJAX possiamo comunque usare questa tecnica utilizzando un semplice redirect.

Documentazione

window.location