Bootstrap 5.2 Tab：内部Prev/Next按钮切换及jQuery报错解决

首先明确核心需求：禁用顶部Tab的点击导航，仅通过面板内的PREVIOUS/NEXT按钮切换Tab。下面分步骤实现，并解决你遇到的Uncaught TypeError: Illegal invocation错误。

1. 基础HTML结构示例 #

假设你用的是常见的Tab结构（兼容自定义样式或Bootstrap）：

<div class="form-tab-wrapper">
  <!-- 顶部Tab导航栏 -->
  <ul class="tab-nav" id="topTabs">
    <li><a class="active" href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
    <li><a href="#tab4">Tab 4</a></li>
  </ul>

  <!-- Tab内容面板 -->
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <p>Tab 1 表单内容</p>
      <button class="btn-next">NEXT</button>
    </div>
    <div class="tab-pane" id="tab2">
      <p>Tab 2 表单内容</p>
      <button class="btn-prev">PREVIOUS</button>
      <button class="btn-next">NEXT</button>
    </div>
    <div class="tab-pane" id="tab3">
      <p>Tab 3 表单内容</p>
      <button class="btn-prev">PREVIOUS</button>
      <button class="btn-next">NEXT</button>
    </div>
    <div class="tab-pane" id="tab4">
      <p>Tab 4 表单内容</p>
      <button class="btn-prev">PREVIOUS</button>
      <button class="btn-submit">提交</button>
    </div>
  </div>
</div>

2. jQuery实现代码 #

第一步：禁用顶部Tab的导航功能 #

// 阻止顶部Tab的点击跳转行为
$('#topTabs a').on('click', function(e) {
  e.preventDefault(); // 禁止默认的锚点跳转
  e.stopPropagation(); // 可选，阻止事件冒泡避免触发其他绑定事件
});

第二步：实现按钮切换Tab逻辑 #

自定义Tab切换（无第三方组件）

// NEXT按钮逻辑
$('.btn-next').on('click', function() {
  // 获取当前所在的Tab面板
  const currentPane = $(this).closest('.tab-pane');
  // 获取下一个Tab面板
  const nextPane = currentPane.next('.tab-pane');

  if (nextPane.length) {
    // 切换面板激活状态
    currentPane.removeClass('active');
    nextPane.addClass('active');
    // 同步顶部Tab的激活样式（保持视觉一致）
    const currentTabLink = $('#topTabs a[href="#' + currentPane.attr('id') + '"]');
    const nextTabLink = $('#topTabs a[href="#' + nextPane.attr('id') + '"]');
    currentTabLink.removeClass('active');
    nextTabLink.addClass('active');
  }
});

// PREVIOUS按钮逻辑
$('.btn-prev').on('click', function() {
  const currentPane = $(this).closest('.tab-pane');
  const prevPane = currentPane.prev('.tab-pane');

  if (prevPane.length) {
    currentPane.removeClass('active');
    prevPane.addClass('active');
    // 同步顶部Tab样式
    const currentTabLink = $('#topTabs a[href="#' + currentPane.attr('id') + '"]');
    const prevTabLink = $('#topTabs a[href="#' + prevPane.attr('id') + '"]');
    currentTabLink.removeClass('active');
    prevTabLink.addClass('active');
  }
});

基于Bootstrap Tab组件的切换（如果用Bootstrap）

如果你用的是Bootstrap的Tab组件，直接用官方提供的tab('show')方法更稳妥：

// NEXT按钮
$('.btn-next').on('click', function() {
  const currentActiveTab = $('#topTabs .nav-link.active');
  const nextTab = currentActiveTab.parent().next().find('.nav-link');
  if (nextTab.length) {
    nextTab.tab('show'); // 调用Bootstrap Tab切换方法
  }
});

// PREVIOUS按钮
$('.btn-prev').on('click', function() {
  const currentActiveTab = $('#topTabs .nav-link.active');
  const prevTab = currentActiveTab.parent().prev().find('.nav-link');
  if (prevTab.length) {
    prevTab.tab('show');
  }
});

3. 解决Uncaught TypeError: Illegal invocation错误 #

这个错误通常是以下原因导致的：

• 错误混用原生DOM和jQuery对象：比如直接对原生DOM元素调用jQuery方法，例如document.getElementById('tab1').addClass('active')，正确写法是$('#tab1').addClass('active')。
• 方法调用上下文错误：如果用第三方组件（如Bootstrap），必须确保调用方法的是jQuery对象，而非原生DOM元素。比如$('#tab2').tab('show')是正确的，document.getElementById('tab2').tab('show')会报错。
• 参数类型错误：调用方法时传入了不符合要求的参数，比如给on('click')传了非函数类型的参数。

检查你的代码，确保所有操作都基于jQuery对象，避免原生DOM和jQuery对象的混用，即可解决该错误。

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