jQuery Tabs - 根据选项卡文本选择选项卡

Question

是否可以根据选项卡标题进行选项卡选择？我当前有一个设置，其中有指向选项卡整数值的链接，但希望能够仅通过字符串值选择选项卡。

当前更改功能

<a href="javascript:changeTab(3)">Application</a>
function changeTab(tabID) {
    $('#tabs').tabs('select', tabID);
}

我“希望”能够做什么

<a href="javascript:changeTab('Driver Application')">Application</a>
function changeTab(tabID) {
    $('#tabs').tabs('select', tabID);
}

我在 SO 上找到了一个示例，该示例获取选项卡文本的值，但没有使用已知值来确定所选选项卡的地方。

Answer 1

试试这个代码。这个想法是根据选项卡的内容获取选项卡的 ID，然后使用现有的选项卡 API 来选择它。

<a href="javascript:changeTab('Driver Application')">Application</a>
function changeTab(tabContents) {
    $('#tabs').tabs('select', $(".ui-tabs-nav a:contains(tabContents)").attr("href"));
}

Answer 2

'select' 方法也可以采用选择器，因此如果您可以忍受使用选项卡的 id，您的代码可能如下所示：

<a href="javascript:changeTab('#driverapplication')">Application</a>
function changeTab(tabID) {
    $('#tabs').tabs('select', tabID);
}

如果您确实想使用选项卡文本本身，则可以找到该选项卡然后工作向后查找 ID...

function changeTab(tabText) {
    var href = $('#tabs li a:contains("' + tabText + '")').attr("href");
    tabs('select', href);
}

显然，要调整口味。

Answer 3

function changeTab(sTabContent) {
    var iId = $(".ui-tabs-nav li a:contains('" + sTabContent + "')")
        .parent().index();
    $('#tabs').tabs('select', iId);
}

另请参阅我的 jsfiddle。