以编程方式更改活动选项卡时，未从 JQuery UI 选项卡中删除 ui 状态焦点类

Question

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

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

问题是，如果我单击一个选项卡，

然后使用键下选择另一个选项卡，则上一个选项卡仍然由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。

我现在为解决它所做的是将其放入我所有的键控绑定中

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