选择选项卡1.10.0

Question

之前jQuery UI的1.10.0我曾经间接选择这样的标签：

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

或

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

现在，使用相同的代码，使用jQuery UI 1.10.0，你会得到一个错误，说有“没有这样的方法'选择'选项卡小部件实例“。

我改为使用“选项”“活动”这样的代码：

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

我结束了使用此（参见实施例）：

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); 
}; 

答使用它们是这样的：

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

，我就不清楚了另一件事是这样的：我不想触发选项卡上的“点击”，我只想“切换”到该选项卡，无需点击。 对我来说，“点击”事件会加载一个标签的内容，而且我不想在每次“选择”一个标签页时加载内容。

Answer 2

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 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

我用上面的$（“[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); 

Answer 5

真的很容易;

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

凡＃tab6是你要选择的选项卡和#tabs的ID是你的标签控件的ID。