control the tab in focus in a nested jQuery-UI Tab

I have a nested jQuery-UI Tab. for example

Tab-Day1

-- Tab-Lunch

-- Tab-Dinner

Tab-Day2

-- Tab-Lunch

-- Tab-Dinner

Tab-Day3 ...

Is there a way to synchronize the sub-tab when I change the upper tab?

Say th开发者_StackOverflow社区e default tab is "Day1"-"Lunch",

Step 1) click on "Dinner" on "Day1" -> "Day1"-"Dinner" will be in focus

Step 2) click on "Day2" -> "Day2"-"Dinner" will be in focus instead of the default "Day2"-"Lunch"? Such that when change the upper tab, the same related sub tab will always be in focus?

Thanks a lot.

You could do something like this:

1. Use data-* attributes to associate tabs with the same "category."

2. Tap into the select event on the tabs widget:

   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;
           }
       }
   });
   

   The purpose of the boolean selectingSiblings is that when you call select manually on tabs, it still fires the event handler. To prevent infinite recursion we need to designate a call to select that we make vs. one that the user made.

Best seen with a working example: http://jsfiddle.net/andrewwhitaker/q8fh7/4/