javascript - Bootstrap 3 : Nested tabs disappear when another tab is made active

Question

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

我正在尝试使用 Bootstrap 和一些额外的 jQuery 来编程嵌套选项卡显示。每当我尝试选择“单位选择”类别中的另一个项目时，内容就会消失。但是，如果您切换到另一个未嵌套的选项卡，内容就会加载。

有问题的 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