將jQuery選項卡ID從＃ui-tabs重命名爲其他東西

Question

我有jQuery選項卡，其中的內容在單擊選項卡時被延遲加載。這很好。

<div id='tabs'> 
    <ul> 
     <li><a href='url-to-content'><span>John</span></a></li> 
     <li><a href='url-to-content'><span>Arnold</span></a></li> 
     <li><a href='url-to-content'><span>Dilbert</span></a></li> 
    </ul> 
</div> 

我想直接鏈接到特定的選項卡，以便該特定的選項卡打開該鏈接。這是由

http://www.example.com/tab_page#ui-tabs-2 

例如實現我想有「用戶界面的選項卡-2」有意義的事情，比如在這種情況下更換

http://www.example.com/tab_page#dilbert 

所以基本上我想能夠將jQuery默認的'ui-tabs-1'，'ui-tabs-2'等標籤ID重命名爲其他內容。

當內容不是延遲加載時很容易，因爲我自己創建了選項卡DIV和ID。但延遲加載的DIV創建由jQuery照顧，我無法找到一種方式來影響它。

我試圖把錨的URL像這樣

 <li><a href='url-to-content#dilbert'><span>Dilbert</span></a></li> 

不要太大的驚喜，也沒有工作。

我知道散列＃後的DIV ID對接受什麼字符有限制，但這不是問題。該部分與標籤可見名稱不完全相同，但只是關閉。

這是我的第一個問題，我已經研究了幾個小時的問題，但沒有運氣。如果之前已經討論過這個問題，我表示歉意，如果有的話，請提供一個關於這個問題的鏈接。我無法找到之前討論過的這個問題。

使用jQuery v1.11.1和jQuery UI - v1.10.4（均爲最新版本）。

---

更新：

基於blgt的想法，我寫了同樣的概念，但略有不同的實施工作方案。在現實生活中的選項卡的數量是不一樣的每一次，所以我結束了動態創建一個JavaScript對象，然後使用該選擇的標籤，就像這樣：

var tabs = { 
    '#john' : 0, 
    '#arnold' : 1, 
    '#dilbert' : 2 

    // There are more tabs 
} 

if(window.location.hash in tabs) { 
    $('#tabs').tabs('option', 'active', tabs[window.location.hash]); 
} 

Answer 1

好吧，我不知道知道是否有一種HTML方式來做到這一點（如果有的話，它可能會更乾淨），但你總是可以通過編程來完成。

location.hash包含#符號（包括#符號本身）和tabs.options.active之後的url部分可用於以編程方式切換製表符。完整的版本看起來像以下：

$("#tabs").tabs(); // create the tabs widget first 
if(window.location.hash === '#John') { 
    $("#tabs").tabs('option', 'active', 0); 
} else if(window.location.hash === '#Arnold') { 
    $("#tabs").tabs('option', 'active', 1); 
} else if(window.location.hash === '#Dilbert') { 
    $("#tabs").tabs('option', 'active', 2); 
} 

或者使用一個變量來實例馬上選項：

var activeTab = window.location.hash === '#John' ? 0 : ... etc; 
$("#tabs").tabs({active:activeTab});