Question

我有一点问题，如何从主菜单激活标签...

当您点击主菜单时选择标签并显示其内容，因为通过data-toggle="tab"标签内容调用，您无法使用data-toggle="tab"，在主菜单上无法使用

这里有一个screenshot

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

这里是示例jsfiddle

Answer 1

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

＆＃13;

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

＆＃13;

Answer 2

Bootstrap有一个API method，您可以调用它来显示或隐藏标签。

$（选择器）的.tab（＆＃39;显示＆＃39）

您必须制定策略来构建选择器以匹配您想要显示/隐藏的标签。

同样，还有一个为Show，Shown，hide和hidden构建的事件处理程序，如果您想根据标签的点击触发事件，例如突出显示您的顶层菜单（如果底部），这将非常有用菜单与。进行交互。

Bootstrap：如何从主菜单激活选项卡

2 个答案: