Bootstrap: как активировать вкладку из главного меню

Question

У меня есть небольшая проблема, как я могу активировать вкладку из главного меню ...

при нажатии на кнопку в главном меню выберите вкладку и отобразить его содержание, becouse закладок содержимое вызова через data-toggle="tab" вы не можете использовать data-toggle="tab", в главном меню не работает

здесь один screenshot

из-за того, как они есть на данный момент является то, что все меню, как «Digilencias, Asesorias и Citaciones» пришлите мне файл «lista_procesos.php», но что я хочу сделать нажмет на каждой вкладке активизироваться и показать его содержимое, не главное это «Procesos»

здесь пример jsfiddle

Answer 1

Bootstrap имеет API method вы можете позвонить, чтобы показать или скрыть вкладки.

$ (селектор) .tab («шоу»)

Вы должны были бы придумать стратегию для построения селекторы, чтобы соответствовать вкладки, которые вы хотите, чтобы показать/скрыть.

Кроме того, для отображения, отображения, скрытия и скрытия используется обработчик событий, который может быть полезен, если вы хотите инициировать события на основе щелчков табуляции, например, высвечивать верхнее меню, если нижнее меню взаимодействует.

Answer 2

Я создал пример в скрипке; 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'); 
 
     }); 
 
    }); 
 
});