Question

现在已经研究了大约4个小时了，但是如果我错过了之前被问过/回答过的地方，我会道歉。

我有一盒自动旋转标签。该框具有导航器部分和内容部分。选项卡按钮列表位于导航器部分，而它们链接的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

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

这是延迟，因为课程的开关被延迟了

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

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

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

Answer 2

您已经提供了单选按钮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/

jQuery UI选项卡：尝试选择“navigator”的子项而不是“content”

2 个答案: