嵌套的jQuery UI Tabs後退按鈕歷史

Question

我使用jQuery Address plug-in使我的jQuery UI選項卡可收藏並符合後退按鈕歷史記錄。很棒。

但是，我想知道是否有可能爲嵌套選項卡提供相同類型的「深度鏈接」？例如，我有以下幾點：

<div id="tabs"> 
<ul class="links"> 
    <li><a href="#one">main tab one</a></li>  
    <li><a href="#two">main tab two</a></li> 
    <li><a href="#three">main tab three</a></li> 
    <li><a href="#four">main tab four</a></li> 
</ul> 
<div id="one"> Main tab one content </div> 
<div id="two"> 
    Main tab two content 
    <div id="nested"> 
    <ul> 
    <li><a href="#nestedone">nested tab one</a></li> 
    <li><a href="#nestedtwo">nested tab two</a></li> 
    <li><a href="#nestedthree">nested tab three</a></li> 
    </ul> 
    <div id="nestedone"> nested tab one </div> 
    <div id="nestedtwo"> nested tab two </div> 
    <div id="nestedthree"> nested tab three </div> 
    </div> <!-- end nested --> 
</div> 
<div id="three"> Main tab three content </div> 
<div id="fout"> Main tab four content </div> 
</div> <!-- end tabs --> 


<script> 
$(document).ready(function(){ 
    /* main tabs stuff */ 
    var $tabs = $("#tabs").tabs().addClass('ui-tabs-vertical ui-helper-clearfix'); 
    $("#tabs li").removeClass('ui-corner-top').addClass('ui-corner-left'); 

    /* nested tabs */ 
    var $nested = $("#nested").tabs().addClass('ui-tabs-hz'); 
    $("#nested ul").removeClass('ui-tabs-nav'); 

    /* show the hash's tab whenever the address is changed */ 
    $.address.change(function(event){    
     $("#tabs").tabs("select" , window.location.hash) ; 
    }) 

    /* when the tab is selected update the url with the hash */ 
    $("#tabs").bind("tabsselect", function(event, ui) {   
     window.location.hash = ui.tab.hash;       
    }) 
}); 
</script> 

一切完美主（外部標籤）：

• 標籤的href鏈接被放在URL作爲具有正確
• 外標籤服從瀏覽器的前進和後退按鈕
• 外標籤是書籤，能夠

不過，我似乎無法得到內部標籤的相同類型的功能。

鑑於嵌套選項卡包含在其中一個「主」選項卡中，上面的綁定函數將$（this）視爲外部選項卡（即使單擊嵌套選項卡時也是如此）。結果是JavaScript代碼爲嵌套選項卡正確執行，但隨後執行，就好像最後一個主（外部）選項卡是選定的選項卡一樣。

我似乎無法弄清楚如何在嵌套選項卡處理完之後以及在最後一個主（外部）選項卡運行之前停止執行JavaScript。我能得到的最接近的結果是將以下內容添加到綁定函數，並停止包含嵌套選項卡的外部選項卡上的執行。

$("#tabs").bind("tabsselect", function(event, ui) {   
     if ($(ui.tab).closest('div').attr('id') !== "nested") { 
     window.location.hash = ui.tab.hash; 
     }      
    }) 

我敢肯定我錯過了一些明顯的東西。有什麼建議麼？

謝謝！

Answer 1

您可能需要採取某種解決方法來組合哈希。我沒有太多經驗的。地址插件，但如何對這樣的事情：

<div id="tabs"> 
<ul class="links"> 
    <li><a href="#one">main tab one</a></li>  
    <li><a href="#two">main tab two</a></li> 
    <li><a href="#three">main tab three</a></li> 
    <li><a href="#four">main tab four</a></li> 
</ul> 
<div id="one"> Main tab one content </div> 
<div id="two"> 
    Main tab two content 
    <div id="nested"> 
    <ul> 
    <li><a href="#two-nestedone">nested tab one</a></li> 
    <li><a href="#two-nestedtwo">nested tab two</a></li> 
    <li><a href="#two-nestedtwo">nested tab three</a></li> 
    </ul> 
    <div id="two-nestedone"> nested tab one </div> 
    <div id="two-nestedtwo"> nested tab two </div> 
    <div id="two-nestedthree"> nested tab three </div> 
    </div> <!-- end nested --> 
</div> 
<div id="three"> Main tab three content </div> 
<div id="four"> Main tab four content </div> 
</div> <!-- end tabs --> 

而對於JavaScript的：

$(document).ready(function(){ 
    /* main tabs stuff */ 
    var $tabs = $("#tabs").tabs().addClass('ui-tabs-vertical ui-helper-clearfix'); 
    $("#tabs li").removeClass('ui-corner-top').addClass('ui-corner-left'); 

    /* nested tabs */ 
    var $nested = $("#nested").tabs().addClass('ui-tabs-hz'); 
    $("#nested ul").removeClass('ui-tabs-nav'); 

    /* show the hash's tab whenever the address is changed */ 
    $.address.change(function(event){    
     var arrParts = window.location.hash.substring(1).split("-");  
     $("#tabs").tabs("select" , '#' + arrParts[0]) ; 
     if (arrParts.length > 1) { 
     $("#nested").tabs("select" , '#' + arrParts[1]) ; 
     } 
    }) 

    /* when the tab is selected update the url with the hash */ 
    $("#tabs, #nested").bind("tabsselect", function(event, ui) {   
     window.location.hash = ui.tab.hash;       
     event.stopPropagation(); 
    }) 
});