Come aggiornare correttamente l'hash dell'URL selezionando una scheda jQuery?

Question

HTML:

<div id="tabs"> 
    <ul> 
     <li><a href="#settings">Settings</a></li> 
     <li><a href="#fields">Fields</a></li> 
    </ul> 
    <div id="settings"> 
     //Tab Contents 
    </div> 
    <div id="fields"> 
     //Tab Contents 
    </div> 
</div> 

Come posso applicare la funzionalità Tab di jQueryUI e costringerlo a aggiornare l'hash URL su di selezione di una nuova scheda?

Answer 1

Oltre all'aggiornamento dell'hash sul cambiamento di tabulazione (con l'evento beforeActivate come nella risposta di Shruggernaut) è molto utile aggiornare la scheda attiva in caso di modifica dell'hash (ovvero abilitare manualmente la cronologia del browser, i pulsanti Indietro/Avanti e digitare manualmente l'hash):

$(window).on('hashchange', function() { 
    if (!location.hash) { 
    $('#tabs').tabs('option', 'active', 0); // activate first tab by default 
    return; 
    } 
    $('#tabs > ul > li > a').each(function (index, a) { 
    if ($(a).attr('href') == location.hash) { 
     $('#tabs').tabs('option', 'active', index); 
    } 
    }); 
}); 

Answer 2

Usa questo codice per creare le schede jQuery UI:

$('#tabs').tabs({ 
    beforeActivate: function (event, ui) { 
     window.location.hash = ui.newPanel.selector; 
    } 
}); 

Ho creato questa risposta, perché non riesco a trovare una singola con un metodo up-to-date. Spero che questo aiuti qualcun altro!