jQuery UI 选项卡：尝试选择“导航器”的子级而不是“内容”

Question

现在已经研究了大约 4 个小时，但如果我错过了之前询问/回答过的问题，我深表歉意。

jsFiddle: http://jsfiddle.net/3Rx3j/3/

我有一盒自动旋转选项卡。该框有一个导航器部分和一个内容部分。选项卡按钮列表位于导航器部分，而它们链接到的 div 位于内容部分。 选项卡按钮包含单选按钮，我希望在选择关联的内容 div 时能够检查这些单选按钮。 以下代码行与我的问题直接相关：

//$(".ui-tabs-selected > .ui-tabs-nav-item").attr("checked", "checked");
$(ui.panel).children(".ui-tabs-nav-item").attr("checked", "checked");
alert($(ui.panel).attr("id"));

上面的注释行几乎满足了我的要求。不幸的是，当“tabsselect”事件触发时，“.ui-tabs-selected”类尚未移动到正在选择的实际选项卡，因此它总是落后一步。 根据研究，我尝试了上面的第二行，它返回内容窗格中 div 中选项卡内容部分的 id。

有没有办法选择单击以触发“tabsselect”事件的实际按钮，而不是关联内容的容器？

感谢您的阅读。

布兰登

Answer 1

您已经给出了单选按钮 id，因此您可以简单地执行以下操作：

$("#headlines").bind("tabsselect", function(event, ui) {
    var index = ui.index + 1;
    $('#radioNav' + index).attr('checked', true);

});

回调包括当前选项卡的索引（从零开始），因此在您的情况下它将是 0、1、2 或 3。这是通过 < 访问的代码>ui.index。只需将此数字与“radioNav”连接并将其检查值设置为 true。这会自动将其他项设置为 false，因为在任何一次只能选择其中一项。

演示： http://jsfiddle.net/3Rx3j/35/

编辑 ：或者更好的是，选择第 n 个单选按钮以及您为它们提供的类：

$("#headlines").bind("tabsselect", function(event, ui) {
    $('.ui-tabs-nav-item:eq(' + ui.index + ')').attr('checked', true);
});

演示：http://jsfiddle.net/3Rx3j/36/

Answer 2

这似乎工作正常： http://jsfiddle.net/3Rx3j/34/

这是延迟，因为类的切换被延迟

setTimeout(function(){
     $(".ui-tabs-selected .ui-tabs-nav-item").attr("checked", "checked");
,500);

我确信获得即时选择的唯一方法是修改插件。

如果您所寻找的只是视觉效果，我建议可能使用 css 基础解决方案，因为提供了一个在选项卡更改时唯一的类。 “.ui-tabs-selected”是您尝试更改的无线电输入的父级。