ブートストラップ3：私はブートストラップといくつかの追加のjQueryを使用して、ネストされたタブ表示をプログラムしようとしてる

Question

https://jsfiddle.net/Miega/Lmn1490b/

別のタブがアクティブになったとき、ネストされたタブが消えます。 「ユニット選択」カテゴリ内の別のアイテムを選択しようとすると、そのコンテンツは消えます。ただし、入れ子になっていない別のタブに切り替えると、コンテンツに負荷がかかります。問題の

のjQueryコード：すべてのヘルプは大歓迎です

$('#unitTabs').on('click', 'a[data-toggle="tab"]', function(e) { 
     e.preventDefault(); 

     var $link = $(this); 

     if (!$link.parent().hasClass('active')) { 

     //remove active class from other tab-panes 
     $('.tab-content:not(.' + $link.attr('href').replace('#','') + ') .tab-pane').removeClass('active'); 

     // click first submenu tab for active section 
     $('a[href="' + $link.attr('href') + '_all"][data-toggle="tab"]').click(); 

     // activate tab-pane for active section 
     $('.tab-content.' + $link.attr('href').replace('#','') + ' .tab-pane:first').addClass('active'); 
     } 
}); 

。

Answer 1

$('#unitTabs').on('click', 'a[data-toggle="tab"]', function(e) { 
    e.preventDefault(); 

    var $link = $(this); 
    var $parent = $link.parent(); 
    if (!$parent.hasClass('active')) { 
    $parent.addClass('active'); 
    $parent.siblings().removeClass('active') 

    $('#unit .tab-pane').removeClass('active') 
    $($link.attr('href')).addClass('active') 
    } 
}); 

JSFiddle