jQuery Tabs 手动激活答案

【问题标题】：jQuery Tabs manual activationjQuery Tabs 手动激活
【发布时间】：2014-08-28 16:03:10
【问题描述】：

如何以编程方式激活特定选项卡？在阅读了在线 jQuery 文档后，我尝试了以下代码：

$("#MyTabsDiv").tabs( "option", "active", 1 );

这确实会显示指定的选项卡内容，但不会突出显示选定选项卡的标题，这是我手动单击选项卡标题时发生的情况。我也尝试过“刷新”选项，但没有任何成功。我在 jQuery 的 tabs() 之上使用 Bootstrap 3 的 TAB css

【问题讨论】：

您可以在所需选项卡上触发点击事件。有点骇人听闻，但我认为它会起作用。
您可以通过 css 实现：stackoverflow.com/questions/16707224/…
谢谢大家。我忘了提到我在 jQuery 的 tabs() 上使用了 Bootstrap 3 的 TAB css，这导致了问题。 @KennyThompson 的简单破解对我有用。
另一种在激活新选项卡时添加活动类（用于引导选项卡）的解决方案。 stackoverflow.com/a/25553465/1342440
Bootstrap 有自己的 jQuery 插件供他们的标签供参考（您可能知道，只是指出以防万一）。

标签： javascript jquery twitter-bootstrap jquery-ui

【解决方案1】：

您可以通过在所需选项卡上触发.click() 事件来手动破解用户单击该选项卡。

你也可以看到bootstrap's own jQuery plugin to manage your tabs 。

【讨论】：

【解决方案2】：

由于 Bootstrap 的选项卡 CSS 使用 active 类，因此在激活选项卡时添加类 - Demo

$( "#MyTabsDiv" ).tabs({
    activate: function( event, ui ) {
        $(ui.newTab).addClass('active')
        $(ui.oldTab).removeClass('active')  
    }
});

或使用 on() 附加到事件 - Demo

$("#MyTabsDiv").on( "tabsactivate", function( event, ui ) {
    $(ui.newTab).addClass('active')
    $(ui.oldTab).removeClass('active')  
});

【讨论】：

【解决方案3】：

在 CSS 中试试这个：

#tabs .ui-tabs-active {
  background: yellow;
}

::source::

【讨论】：