Bootstrap嵌套Nav Tabs组件切换异常问题求助

这个问题的核心是Slick Carousel初始化时会重构DOM结构，与Bootstrap嵌套Tab的切换逻辑产生冲突：

• Slick会将嵌套Tab的<li>导航项包裹在自身的滑块容器中，改变了原有的DOM层级
• focusOnSelect: true配置会让Slick拦截导航项的点击事件，干扰Bootstrap Tab的激活状态同步
• 外层Tab切换时，隐藏的Slick容器无法正确计算尺寸，导致切回后滑块状态异常

修复步骤 #

1. 修改Slick初始化逻辑，同步Tab与滑块状态

替换原有的JS代码为以下内容：

function initNestedSlider() {
  const mySlider = $('.js-slider');
  // 先销毁已存在的Slick实例，避免重复初始化
  if (mySlider.hasClass('slick-initialized')) {
    mySlider.slick('unslick');
  }
  mySlider.slick({
    infinite: true,
    slidesToShow: 2,
    slidesToScroll: 1,
    arrows: false,
    dots: false,
    // 移除focusOnSelect，避免干扰Bootstrap Tab的点击事件
    // focusOnSelect: true
  });

  // 手动绑定导航项点击事件，确保Bootstrap Tab切换优先执行
  mySlider.find('.nav-link').on('click', function(e) {
    e.stopPropagation();
    $(this).tab('show');
  });
}

// 页面加载完成后初始化滑块
initNestedSlider();

// 监听外层Tab切换，切回Tab1时重新初始化滑块（解决隐藏元素尺寸计算问题）
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
  if ($(e.target).attr('href') === '#tab1') {
    initNestedSlider();
  }
});

// 监听嵌套Tab切换，同步Slick滑块的激活状态
$('.js-slider .nav-link').on('shown.bs.tab', function(e) {
  const slideIndex = $(this).closest('.slick-slide').data('slick-index');
  $('.js-slider').slick('slickGoTo', slideIndex);
});

2. 关键修改点说明

• 移除focusOnSelect: true：避免Slick拦截Tab导航的点击事件，让Bootstrap的Tab切换逻辑优先执行
• 新增shown.bs.tab事件监听：
  • 外层Tab切回Tab1时重新初始化Slick，解决隐藏容器的尺寸计算异常
  • 嵌套Tab切换时同步Slick滑块的激活状态，确保滑块与Tab内容对应
• 手动绑定导航项点击事件：阻止Slick的默认事件冒泡，确保Bootstrap Tab切换正常触发

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