jquery - 以编程方式更改活动选项卡时，未从 JQuery UI 选项卡中删除 ui-state-focus 类

Question

我正在使用 jquery hotkeys 插件并将 keydown 按下绑定到我的 JQuery UI 选项卡，如下所示：

$(document).bind('keydown', '2', function (evt){ 
    $("#TabsID").tabs("option", "active", 1); 
    return false; 
});`

问题是，如果我单击一个选项卡，然后使用 keydown 选择另一个选项卡，前一个选项卡的样式仍然ui-state-focus如下所示：

<li class="ui-state-default ui-corner-top ui-state-focus" role="tab" 
    tabindex="-1" aria-controls="foo" aria-labelledby="ui-id-5" 
    aria-selected="false">
    <a href="#foo" class="ui-tabs-anchor" role="presentation" tabindex="-1" 
        id="ui-id-5">
        Foo text
    </a>
</li>

在我点击其他地方之前，它会一直保持这种状态。我正在使用 jQuery UI 1.10.3、jQuery 2.0.1 和 jQuery Hotkeys 0.8。

我现在为解决它所做的就是把它放在我所有的 keydown 绑定中

$("#foo").find("li.ui-state-focus").removeClass('ui-state-focus');

但我想知道是否有更好的解决方案。

Answer 1

经过一些测试，我认为删除类是最好的方法，不需要为这个简单的任务编写更多代码，这应该可以完美地工作：

$(document).bind('keydown', '2', function (evt){

  $("#tabs").find("li.ui-state-active").removeClass('ui-state-active');
  $( "#tabs" ).tabs( "option", "active", 2 );
  return false;
});