Jak poprawnie zaktualizować hash adresu URL po wybraniu karty 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> 

Jak mogę zastosować funkcjonalność jQueryUI za Tab i zmusić go do aktualizacji hash URL przy wyborze nowej karty?

Answer 1

Oprócz aktualizacji hasza na zmianie zakładki (z zdarzeniem beforeActivate, jak w odpowiedzi Shruggernauta) bardzo przydatne jest zaktualizowanie aktywnej karty przy zmianie hasza (tj. Włączenie historii przeglądarki, przyciski wstecz/do przodu i wpisanie użytkownika w haśle ręcznie):

$(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

użyć tego kodu do tworzenia kart jQuery UI:

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

Stworzyłem tę odpowiedź, ponieważ nie mogę znaleźć ani jednego z metodą up-to-date. Mam nadzieję, że to pomoże komuś innemu!