25

在 jquery UI 1.10.0之前，我曾经间接选择这样的选项卡：

$("#tabs").tabs( "select", 5 );

或者

$("#tabs").tabs( "select", "tab6" );

现在，使用相同的代码，使用jquery UI 1.10.0，您会收到一条错误消息，指出“标签小部件实例没有这种方法 'select' ”。

我将代码更改为使用“选项”“活动”，如下所示：

$("#tabs").tabs( "option","active", 5 );

但是，看起来我只能使用索引。按 ID 选择不再起作用。因此，不要使用这样的 ID（这不起作用）：

$("#tabs").tabs( "option","active", "tab6" );

你必须这样做：

var idx = $('#tabs a[href="#tab6"]').parent().index();
$("#tabs").tabs( "option", "active", idx );

或者，以更短的形式

$("#tabs").tabs( "option", "active", $("#tab6").parent().index() );

我阅读了“更改日志”（http://jqueryui.com/changelog/1.10.0/），但没有看到任何有关此更改的信息。

在jquery UI 1.10.0中是否有另一种按名称选择选项卡的方法？

我在这里为想要尝试的人创建了一个演示......

http://jsbin.com/ojufej/1

4

5 回答 5

9

jQuery在 v.1.9 中弃用了该方法select

该select方法已被弃用，只支持更新活动选项。您应该将所有对该方法的调用替换为对该select方法的调用option以更改活动选项。

在 v.1.10 中，他们完全删除了它：

删除：选择方法。（# 7156，7cf2719）_

最接近按名称选择选项卡的方法是使用href属性选择器和trigger方法。

$( "[href='#tab6']").trigger( "click" );

演示：http: //jsfiddle.net/QRUGM/

原始select方法做了类似的事情：

this.anchors.eq( index ).trigger( this.options.event + this.eventNamespace );

只有他们通过索引而不是名称选择选项卡。

于 2013-02-13T21:51:22.580 回答
7

我最终使用了这个（见例子）：

http://jsfiddle.net/AzSUS/

基本上，我添加了这些功能

$.fn.tabIndex = function () {
    return $(this).parent().find(this).index() - 1; 
};
$.fn.selectTabByID = function (tabID) {
    $(this).tabs("option", "active", $('#' + tabID).tabIndex());
};
$.fn.selectTabByIndex = function (tabIndex) {
    $(this).tabs("option", "active", tabIndex);
};

Ans 像这样使用它们：

$("#tabs").selectTabByIndex(0);

$("#tabs").selectTabByID('tab2');

正如您将在我的示例的 HTML 部分中看到的那样...

<div id="tabs">
  <ul>
    <li><a href="#tab1">[0] #tab1</a></li>
    <li><a href="#tab2">[1] #tab2</a></li>
    <li><a href="#tab3">[2] #tab3</a></li>
    <li><a href="#tab4">[3] #tab4</a></li>
  </ul> 
  <div id="tab1">Tab 1 Content</div>
  <div id="tab2">Tab 2 Content</div>
  <div id="tab3">Tab 3 Content</div>
  <div id="tab4">Tab 4 Content</div>
</div>

...我有一个非常简单、定义明确的标签结构。

“真实”应用程序包含 3 个级别的选项卡

请参阅此示例，其中包含 2 个级别：

http://jsfiddle.net/vgaTP/

我不清楚的另一件事是：我不想触发选项卡上的“单击”，我只想“切换”到该选项卡，而不单击。对我来说，“单击”事件会加载选项卡的内容，我不想每次“选择”选项卡时都加载内容。

于 2013-05-14T19:00:22.937 回答
1

如果您已经有大量引用这些已弃用函数的遗留代码，并且迁移是一件令人头疼的事情，请创建一个向后兼容模块来连接旧/新方法。

$.extend(true, $.ui.tabs.prototype, {
    select: function (indexOrId) {
        if (typeof indexOrId == "integer")
            this.option("select", indexOrId);
        else
            $("[href='#"+ indexOrId +"']", this.element).click();
    }
    // other methods..
});
于 2013-05-14T08:17:33.377 回答
1

真的很容易；

$("#tabs").tabs("option", "active", $("#tabs").find("#tab6").index()-1 );

其中#tab6是您要选择的选项卡的ID， # tabs是您的选项卡控件的ID。

于 2014-09-30T19:44:19.010 回答
0

我使用了上面的 $("[href='#tab6']").trigger("click"); 由 Ayman Safadi 发布（谢谢！）连同一个隐藏的字段，它的作品很棒。这篇文章也很重要http://geekswithblogs.net/dotNETvinz/archive/2010/07/09/jquery-tab-retain-selected-tab-across-postbacks-in-asp.net.aspx与 Aymens 结合答案帮助我得到了最终答案:) 谢谢大家

 <script type="text/javascript">
    $(function () {

        var currTab = $("#<%= HFCurrTabIndex.ClientID %>").val();

        if (currTab == 0) {
            $("[href='#tab_1_1']").trigger("click");
        }

        if (currTab == 1) {
            $("[href='#tab_1_2']").trigger("click");
        }

        if (currTab == 2) {
            $("[href='#tab_1_3']").trigger("click");
        }

        if (currTab == 3) {
            $("[href='#tab_1_4']").trigger("click");
        }   

    });
</script>

还要注意，下面的代码也可以工作，但由于某种原因将我的标签变成蓝色

 $('#tabs').tabs();
                   var currTab = $("#<%= HFCurrTabIndex.ClientID %>").val();
                   $('#tabs').tabs("option", "active", currTab);
于 2013-06-11T16:59:52.900 回答