Question

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

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

Bootstrap 3：当另一个选项卡处于活动状态时，嵌套选项卡将消失

1 个答案: