Question

我有以下JavaScript函数来通过索引选择选项卡：

function changeTab(tabIndex) {
    $("#panel").tabs("select", tabIndex);
}

但我必须检查该标签是否存在和，如果它可见，否则它会尝试选择一个不应该可用的标签。

对于存在它很好，我只需要使用$("#panel").tabs("length");，但是check if it is visible我需要元素本身。

Answer 1

似乎没有内置的方法，但我能够通过导航到选项卡来完成它：

function changeTab(tabIndex) {
    var panel = $("#panel");
    var queryIndex = tabIndex + 1; // 1 based
    var desiredTab = panel.find("> ul li:nth-child( " + queryIndex + ")");

    if (desiredTab && desiredTab.is(":visible")) {
        panel.tabs("select", tabIndex);
    }
}

Answer 2

我还没有测试，但您应该能够通过

获取所选标签的索引

var activeIndex = $("#panel").tabs( "option" , 'selected')

然后你应该能够将activeIndex等于tabIndex

Answer 3

首先获取Active index

var activeIndex = $("#panel").tabs('option', 'active');

然后使用css类获取选项卡内容面板

// this will return the html element
var element=   $("#panel").find( ".ui-tabs-panel" )[activeIndex];

现在将其包装在jQuery对象中以进一步使用它

 var tabContent$ = $(element);

这里我想添加两个信息，类.ui-tabs-nav用于与之关联的导航，.ui-tabs-panel与标签内容面板相关联。在jquery ui网站的这个链接演示中，您将看到使用此类 - http://jqueryui.com/tabs/#manipulation

在jQuery UI选项卡中，如何通过其选项卡索引获取选项卡元素？

3 个答案: