在嵌套的jQuery-UI標籤中控制焦點選項卡

Question

我有一個嵌套的jQuery-UI標籤。 例如

製表第一天
- 製表午餐
- 製表晚餐
製表日間2
- 製表午餐
- 製表晚餐
製表第三天 。 ..

當我更改上面的選項卡時是否有辦法同步子選項卡？

說出默認標籤是「第一天」 - 「午餐」，
步驟1）點擊的「第1天」，「晚餐」 - >「第一天」 - 「晚餐」將在焦點
步驟2）點擊在「第2天」 - >「第2天」 - 「晚餐」中將重點關注，而不是默認的「第2天」 - 「午餐」？ 這樣，當更改上面的選項卡時，相同的相關子選項卡將始終處於焦點？

非常感謝。

Answer 1

你可以做這樣的事情：「類別」

1. 使用data-*屬性選項卡具有相同關聯

2. 進軍選項卡上的插件的select事件：

   var selectingSiblings = false; 
   
   $(".tabs").tabs({ 
       select: function(event, ui) { 
        if (!selectingSiblings) { 
         var category = $(ui.tab).data("category"), 
          hash; 
   
         selectingSiblings = true;    
   
         if (category) { 
          $("a[data-category='" + category + "']").each(function() { 
           var $tabs = $(this).closest(".tabs"); 
   
           $tabs.tabs("select", $(this).attr("href")); 
          }); 
         } 
         selectingSiblings = false; 
        } 
       } 
   }); 
   

   布爾selectingSiblings的目的是，當你在選項卡上手動調用select，它仍是起火的事件處理程序。爲了防止無限遞歸，我們需要指定一個對我們所做的select的調用，而不是用戶做出的調用。

最佳見過一個工作示例：http://jsfiddle.net/andrewwhitaker/q8fh7/4/