Nested Tabs Bootstrap 3，错误：内容保持不变

问题描述

我正在将 bootstrap-3与Jquery结合使用来制作嵌套选项卡，而我在那里获得了一些 codepen 东西，但我却得到了想要的东西，但经过一些修改在代码中，当我单击第一个（主）选项卡，然后单击相关的子选项卡时，我得到了一些不同的输出： ，但是我看到了内容单击有关子选项卡的下一个选项卡。它不仅显示新内容，还显示旧单击选项卡和新单击选项卡的内容。

这是我的代码笔链接：https://codepen.io/guenon/pen/WNwpxVK

这是原始的代码笔链接：enter link description here

--header 'maxauth: bWF4dXNlcjptYXhwYXNz'

$('#interest_tabs').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');
      }

    });

@import "compass/css3";

解决方法

您只需将zztro wvtsroolkfeca vjaa tsronig onigdc 更改为$('#interest_tabs')