jQuery Tabs手动激活

时间:2014-08-28 16:03:10

标签: javascript jquery twitter-bootstrap jquery-ui

如何以编程方式激活特定标签?我在阅读了在线jQuery文档后尝试了以下代码:

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

这会显示指定的选项卡内容,但它不会突出显示所选选项卡的标题,这是当我手动单击选项卡标题时发生的情况。我也试过了“刷新”选项,没有任何成功。我在jQuery的tabs()

之上使用Bootstrap 3的TAB css

3 个答案:

答案 0 :(得分:1)

您可以通过在所需标签上触发.click()事件来手动点击该标签来阻止用户。

您还可以看到bootstrap's own jQuery plugin to manage your tabs

答案 1 :(得分:0)

在CSS中尝试:

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

::source::

答案 2 :(得分:0)

由于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')  
});