Question

我有一个嵌套的jQuery-UI选项卡。例如

制表第一天
- Tab-Lunch
- Tab-Dinner
制表第2天
- Tab-Lunch
- Tab-Dinner
制表第三天 ...

当我更改上部标签时，有没有办法同步子标签？

说默认标签是“Day1” - “午餐”，
步骤1）点击“Day1”上的“Dinner” - ＆gt; “Day1” - “晚餐”将成为焦点步骤2）点击“Day2” - ＆gt; “Day2” - “晚餐”将成为焦点，而不是默认的“Day2” - “午餐”？这样当更改上部选项卡时，相同的相关子选项卡将始终处于焦点位置？

非常感谢。

Answer 1

你可以这样做：

使用data-*属性将标签与相同的“类别”相关联。

点击标签小部件上的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/

在嵌套的jQuery-UI选项卡中控制焦点中的选项卡

1 个答案: