jQueryタブの選択時にURLハッシュを正しく更新する方法は？

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> 

どのように私はjQueryUIのタブ機能を適用すると、新しいタブを選択すると、URLのハッシュを更新することを強制することができますか？お使いのjQuery UIのタブを作成するために

Answer 1

ハッシュ変更時にアクティブなタブを更新する（つまり、ブラウザの履歴、戻る/進むボタン、ハッシュでのユーザー入力を手動で有効にするなど）、タブ変更時にハッシュを更新するだけでなく、beforeActivateイベントを使用して、 ）：

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

使用このコードを：

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

私は、最新の方法で単一のものを見つけることができないので、私はこの回答を作成しました。これが他の人に役立つことを願っています！