jquery - Bootstrap : how to activate a tab from the main menu

Question

我有一个小问题，如何从主菜单激活一个选项卡...

当你点击主菜单选择选项卡并显示其内容时，因为选项卡内容是通过data-toggle="tab"调用的，你不能使用data-toggle ="tab"，在主菜单不起作用

这里一个screenshot

因为他们目前的方式是所有菜单为“Digilencias、Asesorias 和 Citaciones”向我发送文件“lista_procesos.php”，但我想做的是单击每个选项卡激活并显示其内容，不是主要的是“Procesos”

这里是例子jsfiddle

Answer 1

我在 fiddle 中创建了一个例子； http://jsfiddle.net/61gn1ezq/1 .正如 bpeterson76 所说，创建一个选择器来选择正确的选项卡。我在菜单中添加了 data-show-tab="tabidtoshow" 属性，并创建了一个使用 API 显示选项卡的脚本。

jQuery(function ($) {
    //get all tab-buttons
    var lista_tab = $('#estudiantes_lista_tab a');
    //select anchors from menu that have'data-show-tab'
    $('[data-show-tab]').each(function () {
        //get tab-id from data-attribute
        var tab_id = $(this).data('showTab');
        //set click event
        $(this).click(function (e) {
            //prevent default click
            e.preventDefault();
            //remove all active classes from list
            lista_tab.removeClass('active');
            //show correct tab and make active
            lista_tab.filter('[href=#' + tab_id + ']').tab('show').addClass('active');
        });
    });
});