Bootstrap 5.3通过<select>控制Tabs报错Illegal invocation求助

你遇到的Illegal invocation错误主要来自三个关键点：

1. bootstrap.Tab实例化参数错误：你传入的是Tab内容容器#myTabContent，但Bootstrap的Tab构造函数要求传入Tab触发元素（比如带data-bs-toggle="tab"的导航链接），参数类型不匹配导致非法调用。
2. show()方法用法错误：Tab实例的show()方法不需要额外传参，实例本身已经绑定了对应触发元素，调用后会自动切换到关联面板。
3. HTML结构缺失：你的代码里没有Bootstrap Tab必需的tab-content容器和tab-pane面板元素，导致切换目标不存在。

HTML（补全Tab结构） #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<select name="tabselect" class="js-tabselect" role="tablist">
  <option value="#tab-one">1</option>
  <option value="#tab-two">2</option>
  <option value="#tab-three">TV-3</option>
  <option value="#tab-four">4</option>
  <option value="#tab-five">5</option>
  <option value="#tab-six">6</option>
  <option value="#tab-seven">7</option>
  <option value="#tab-eight">8</option>
  <option value="#tab-nine">9</option>
</select>

<!-- 补全Tab内容容器与面板 -->
<div class="tab-content mt-3" id="myTabContent">
  <div class="tab-pane fade show active" id="tab-one" role="tabpanel">标签页1内容</div>
  <div class="tab-pane fade" id="tab-two" role="tabpanel">标签页2内容</div>
  <div class="tab-pane fade" id="tab-three" role="tabpanel">标签页3内容</div>
  <div class="tab-pane fade" id="tab-four" role="tabpanel">标签页4内容</div>
  <div class="tab-pane fade" id="tab-five" role="tabpanel">标签页5内容</div>
  <div class="tab-pane fade" id="tab-six" role="tabpanel">标签页6内容</div>
  <div class="tab-pane fade" id="tab-seven" role="tabpanel">标签页7内容</div>
  <div class="tab-pane fade" id="tab-eight" role="tabpanel">标签页8内容</div>
  <div class="tab-pane fade" id="tab-nine" role="tabpanel">标签页9内容</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

方案一：直接操作DOM类（轻量高效） #

const tabSelect = document.querySelector(".js-tabselect");

tabSelect.addEventListener('change', function handleChange(event) {
  const targetPaneId = event.target.value;
  const targetPane = document.querySelector(targetPaneId);
  if (!targetPane) return;

  // 移除所有激活面板的状态类
  document.querySelectorAll('.tab-pane.active').forEach(pane => {
    pane.classList.remove('show', 'active');
  });

  // 激活选中的面板
  targetPane.classList.add('show', 'active');
});

方案二：严格使用Bootstrap Tab API（自动处理动画与事件） #

适合需要监听Tab切换事件的场景：

const tabSelect = document.querySelector(".js-tabselect");

tabSelect.addEventListener('change', function handleChange(event) {
  const targetPaneId = event.target.value;

  // 创建临时触发元素，模拟导航链接行为
  const tempTrigger = document.createElement('a');
  tempTrigger.href = targetPaneId;
  tempTrigger.setAttribute('data-bs-toggle', 'tab');
  
  // 实例化Tab并完成切换
  const tab = new bootstrap.Tab(tempTrigger);
  tab.show();

  // 清理临时元素
  tempTrigger.remove();
});

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