如何在選擇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哈希？

Answer 1

除了更新標籤更改上的散列（與在shruggernaut的回覆中一起使用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

使用此代碼來創建您的jQuery用戶界面標籤：

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

我創造了這個答案，因爲我無法找到一個單一的一個用了最新的方法。希望這可以幫助別人！