如何实现点击父Tab时默认打开首个子Tab？

我搭建了一个嵌套Tab页面，现在遇到个小麻烦——点击主Tab之后，还得手动点一下对应的子Tab才能看到内容，操作起来有点繁琐。我想要实现的效果是：点击主Tab时，自动打开并激活对应的首个子Tab。

目前我的Tab功能代码是这样的：

jQuery('#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
 jQuery('.tab-content:not(.' + $link.attr('href').replace('#','') + ') .tab-pane').removeClass('active');
 // click first submenu tab for active section
 jQuery('a[href="' + $link.attr('href') + '_all"][data-toggle="tab"]').click();
 // activate tab-pane for active section
 jQuery('.tab-content.' + $link.attr('href').replace('#','') + ' .tab-pane:first').addClass('active');
 }
});

问题分析 #

原来的代码尝试通过模拟点击子Tab链接来激活，但这种方式可能因为事件执行顺序、选择器匹配偏差等问题导致失效，而且模拟点击可能触发额外绑定的事件，稳定性不足。

解决方案1：手动同步子Tab状态（原生jQuery方式） #

我们可以直接手动给首个子Tab的标签和内容面板添加active类，同时清理其他无关的激活状态，逻辑更直接可靠：

jQuery('#interest_tabs').on('click', 'a[data-toggle="tab"]', function(e) {
  e.preventDefault();
  const $mainTabLink = $(this);
  const mainTabId = $mainTabLink.attr('href').replace('#', '');
  
  // 只有当前主Tab未激活时才执行操作
  if (!$mainTabLink.parent().hasClass('active')) {
    // 1. 移除所有其他主Tab下子Tab的激活状态（标签+内容面板）
    $('.tab-content:not(.' + mainTabId + ')').find('.tab-pane, a[data-toggle="tab"]').parent().removeClass('active');
    
    // 2. 激活当前主Tab本身
    $mainTabLink.parent().addClass('active');
    $(`.tab-pane${$mainTabLink.attr('href')}`).addClass('active');
    
    // 3. 激活当前主Tab下的首个子Tab（标签+内容面板）
    const $firstSubTabLink = $(`#${mainTabId} a[data-toggle="tab"]`).first();
    $firstSubTabLink.parent().addClass('active');
    $(`.tab-content.${mainTabId} .tab-pane`).first().addClass('active');
  }
});

解决方案2：利用Bootstrap Tab原生API（更推荐） #

如果你用的是Bootstrap的Tab组件，直接用它提供的tab('show')方法来激活子Tab，完全贴合组件原生行为，状态同步更准确：

jQuery('#interest_tabs a[data-toggle="tab"]').on('show.bs.tab', function(e) {
  // 获取当前点击的主Tab对应的内容容器ID
  const mainTabTarget = $(e.target).attr('href');
  // 找到该主Tab下的首个子Tab链接
  const $firstSubTab = $(`${mainTabTarget} a[data-toggle="tab"]`).first();
  
  // 调用Bootstrap的tab方法激活子Tab，自动同步标签和内容面板状态
  $firstSubTab.tab('show');
});

这个方法的优势在于不需要手动操作DOM类名，完全依赖组件自身逻辑，避免出现状态不一致的问题，代码也更简洁。

内容的提问来源于stack exchange，提问作者Carter