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

Question

在 jquery UI 1.10.0 之前,我曾经间接选择了这样一个标签:

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

要么

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

现在,使用相同的代码,使用jquery UI 1.10.0,您会收到一条错误消息,指出" 没有这样的方法'select'for tabs widget instance ".

我更改了代码以使用"选项""活动",如下所示:

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

我阅读了"changelog"(http://jqueryui.com/changelog/1.10.0/),但我没有看到任何有关此更改的信息.

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

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

http://jsbin.com/ojufej/1

Answer 1

jQuery 弃用了selectv.1.9中的方法

该select方法已被弃用,仅支持更新活动选项.您应该使用对select方法的调用替换对方法的所有调用option以更改活动选项.

在第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 );

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

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"事件会加载选项卡的内容,我不希望每次"选择"选项卡时都加载内容.