Bootstrap 4嵌套导航链接仅首次可打开标签页内容问题

嘿，我帮你捋捋这个问题——核心是嵌套导航的事件处理和选中状态逻辑没做好，导致点了子级链接后，平级导航就“罢工”了。我来拆解问题并给你修复方案：

问题根源分析 #

从你说的复现步骤来看：

• 点Reports>Phone能正常加载内容，但此时选中状态只绑定在了Phone子项上，父级和其他平级项的状态没正确更新；
• 点Home没反应，是因为之前的选中状态逻辑干扰了顶级导航的点击事件，或者事件冒泡让父级逻辑抢了先；
• 再点Phone没反应，是因为标签页切换依赖的active状态没有被正确重置或识别。

修复方案 #

针对这几个关键点调整代码就行：

1. 阻止事件冒泡，避免父级导航误触发 #

在嵌套子导航的点击事件里加event.stopPropagation()，防止点子项时触发父级的标签页逻辑：

$('.nav-item.has-subnav .subnav a').on('click', function(e) {
  e.stopPropagation(); // 阻止事件冒泡到父级导航项
  // 切换标签页内容
  const targetTab = $(this).attr('data-tab');
  $('.tab-content').removeClass('active');
  $('#' + targetTab).addClass('active');
  
  // 更新导航选中状态
  $('.nav-item, .subnav-item').removeClass('active');
  $(this).closest('.subnav-item').addClass('active');
  $(this).closest('.has-subnav').addClass('active'); // 保持父级导航的选中状态
});

2. 统一所有导航项的选中状态逻辑 #

不管是顶级还是嵌套导航，点击时先重置所有项的active状态，再给当前项和对应父项加上：

// 顶级导航点击逻辑
$('.nav-item:not(.has-subnav) a').on('click', function() {
  const targetTab = $(this).attr('data-tab');
  $('.tab-content').removeClass('active');
  $('#' + targetTab).addClass('active');
  
  // 重置所有选中状态
  $('.nav-item, .subnav-item').removeClass('active');
  $(this).closest('.nav-item').addClass('active');
});

3. 检查标签页ID匹配 #

确认所有导航项的data-tab属性和对应标签页的id完全一致，比如Home的data-tab要对应home-tab，Phone对应phone-tab，避免ID不匹配导致切换失效。

修复后验证流程 #

调整完再测试：

• 点Reports>Phone：标签页加载Phone Content，Reports父项和Phone子项都保持active；
• 点Home：所有导航选中状态重置，Home变为active，标签页切换到对应内容；
• 点Profile：正常切换内容；
• 再次点Phone：能正确触发标签页切换，选中状态也会同步更新。

这样就能解决你遇到的异常行为啦！

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