Question

之前 jquery UI 1.10.0 我过去常常间接选择这样的标签：

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

或

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

现在，使用相同的代码，使用 jquery UI 1.10.0 ，您会收到一条错误消息，指出“ 没有这样的方法'select'for tabs widget instance < / EM> ”。

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

$("#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

Answer 1

jQuery deprecated the select method in v.1.9

不推荐使用select方法，而只是更新活动选项。您应该使用select方法调用替换对option方法的所有调用，以更改有效选项。

In v.1.10 they completely removed it：

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

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

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

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

原始select方法执行了similar：

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

只有他们通过索引而不是名称选择了标签。

Answer 2

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

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/

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

Answer 3

如果您已经有大量遗留代码引用这些折旧函数，并且迁移很麻烦，请创建一个向后兼容模块，该模块桥接旧/新方法。

$.extend(true, $.ui.tabs.prototype, {
    select: function (indexOrId) {
        if (typeof indexOrId == "integer")
            this.option("select", indexOrId);
        else
            $("[href='#"+ indexOrId +"']", this.element).click();
    }
    // other methods..
});

Answer 4

真的很容易;

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

＃tab6 是您要选择的标签的ID， #tabs 是标签控件的ID。

Answer 5

我使用了上面的$（“[href ='＃tab6']”）。触发器（“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);

在jquery UI 1.10.0中按名称选择选项卡

5 个答案: