从小部件内设置扩展 jQuery 选项卡小部件的活动选项卡

Question

我看过几个示例，说明如何从小部件外部以编程方式设置活动选项卡。但是，我已经扩展了选项卡小部件，似乎无法从小部件中以编程方式设置活动选项卡。我创建了一个小测试用例来演示。

Javascript:

$(document).ready(function(){
    $.widget( "custom.extendedTabs", $.ui.tabs, {
        _create: function() {
            var self=this;
            this.element.mouseover(function(){
                console.log(self.options.active);
                self.options.active=3;
                console.log(self.options.active);
            });
            return this._super();
        }
    });

    $(".tabs").each(function(){
        $(this).extendedTabs("option","active",1);
    });
});

HTML:

<div id="tabs1" class="tabs">
  <ul>
    <li><a href="#tabs1_1">HEY1!</a></li>
    <li><a href="#tabs1_2">HEY2!</a></li>
    <li><a href="#tabs1_3">HEY3!</a></li>
    <li><a href="#tabs1_4">HEY4!</a></li>
  </ul>
  <div id="tabs1_1">
    <p>Content 1</p>
  </div>
  <div id="tabs1_2">
    <p>Content 2</p>
  </div>
  <div id="tabs1_3">
    <p>Content 3</p>
  </div>
  <div id="tabs1_4">
    <p>Content 4</p>
  </div>
</div>

目标：

鼠标悬停在选项卡小部件上时自动将活动选项卡设置为第 4 个（索引 3）。

问题：

在此演示中，"active" 选项在初始化后立即成功设置（索引 1），并且焦点按预期跳转到第二个选项卡。但是，在鼠标悬停时，即使活动选项已成功设置为 3（如日志记录所验证），选项卡也不会按预期跳转到第 4 个选项卡。

我找到了一种解决方法，只需使用我想要选择的选项卡的 click() 方法即可。但是，这不是必需的——此功能应该直接在小部件中运行。我只是错过了一些东西。其他选项在小部件中工作得很好。例如，我可以在鼠标悬停时调用 self.options.collapsible=true，它会按预期影响更改。

有什么想法吗？

Answer 1

找到解决方案！

您可以从扩展小部件中调用 _setOptions()。

我的具体代码是：

this._setOption("active",this.element.find(">ul>li").length-1);

但是，一般来说，解决方案是：

this._setOption("active", <zero-based index of tab to activate>);

从小部件内设置扩展 jQuery 选项卡小部件的活动选项卡

Setting the active tab of an extended jQuery tab widget from within the widget

jquery

tabs

widget

jquery-ui-tabs

extend