Bootstrap 5.3：<select>内嵌tablist仅最新Firefox可用，求解决方案

你的问题核心在于：Bootstrap 5.3的Tab组件并未将<option>列为标准触发元素，只有Firefox浏览器会解析option上的data-bs-toggle属性并触发tab切换，Chrome等其他浏览器对option元素的事件处理逻辑不同，导致功能失效。

下面提供两种通用的实现方案：

方案一：监听Select的Change事件手动切换Tab #

无需大幅修改原有HTML结构，通过原生JS监听select的选择事件，手动控制tab面板的显示状态：

<div class="select-dropdown">
  <select id="bTransaction">
    <option class="active" data-tab-target="#business1">Business 1</option>
    <option data-tab-target="#business2">Business 2</option>
    <option data-tab-target="#business3">Business 3</option>
  </select>
</div>
<div class="tab-content" id="bTransactionContent">
  <div class="tab-pane fade show active" id="business1">
    Business 1 Content
  </div>
  <div class="tab-pane fade" id="business2">
    Business 2 Content
  </div>
  <div class="tab-pane fade" id="business3">
    Business 3 Content
  </div>
</div>

<script>
const selectEl = document.getElementById('bTransaction');
selectEl.addEventListener('change', function(e) {
  // 获取选中项对应的tab面板目标
  const targetTab = e.target.options[e.target.selectedIndex].getAttribute('data-tab-target');
  
  // 移除所有tab面板的激活状态
  document.querySelectorAll('.tab-pane').forEach(pane => {
    pane.classList.remove('show', 'active');
  });
  // 激活选中的tab面板
  document.querySelector(targetTab).classList.add('show', 'active');
  
  // 更新select选项的active类
  document.querySelectorAll('#bTransaction option').forEach(opt => {
    opt.classList.remove('active');
  });
  e.target.options[e.target.selectedIndex].classList.add('active');
});
</script>

方案二：用Bootstrap Dropdown模拟Select样式Tab #

这种方案更贴合Bootstrap组件设计规范，兼容性更强，且样式可自定义：

<!-- 模拟Select的Dropdown按钮 -->
<div class="dropdown">
  <button class="btn btn-outline-secondary dropdown-toggle w-100 text-start justify-content-between" 
          type="button" id="tabDropdownBtn" 
          data-bs-toggle="dropdown" aria-expanded="false">
    Business 1
  </button>
  <!-- Dropdown菜单作为Tab切换选项 -->
  <ul class="dropdown-menu w-100" aria-labelledby="tabDropdownBtn">
    <li><a class="dropdown-item active" data-bs-toggle="tab" href="#business1">Business 1</a></li>
    <li><a class="dropdown-item" data-bs-toggle="tab" href="#business2">Business 2</a></li>
    <li><a class="dropdown-item" data-bs-toggle="tab" href="#business3">Business 3</a></li>
  </ul>
</div>

<!-- 原有Tab内容区域保留 -->
<div class="tab-content" id="bTransactionContent">
  <div class="tab-pane fade show active" id="business1">
    Business 1 Content
  </div>
  <div class="tab-pane fade" id="business2">
    Business 2 Content
  </div>
  <div class="tab-pane fade" id="business3">
    Business 3 Content
  </div>
</div>

<script>
// 监听Tab切换事件，更新Dropdown按钮的显示文本
document.querySelectorAll('.dropdown-item[data-bs-toggle="tab"]').forEach(item => {
  item.addEventListener('shown.bs.tab', function(e) {
    document.getElementById('tabDropdownBtn').textContent = e.target.textContent;
  });
});
</script>

方案对比 #

• 方案一：改动最小，适合需要保留原生select样式的场景，但样式定制性较弱。
• 方案二：完全基于Bootstrap组件，兼容性更好，样式可通过Bootstrap工具类或自定义CSS灵活调整，体验更统一。

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