如何在Search()函数中获取选中的tab按钮ID？

DevOps 小满

2026-8-5

Bootstrap Tab选中项ID获取及跳转解决方案

核心解决思路

Bootstrap Tab组件会为当前激活的标签按钮自动添加active类，直接通过这个类定位到选中的按钮，再提取其ID即可实现后续分支逻辑。

具体代码实现

方法一：原生DOM查询（无需依赖Bootstrap JS）

直接在Search()函数中定位激活状态的Tab按钮：

function Search() {
  // 定位ul#FlightType下的激活Tab按钮
  const activeTabBtn = document.querySelector('#FlightType .nav-link.active');
  if (!activeTabBtn) {
    console.log("未选中任何Tab选项");
    return;
  }

  const selectedTabId = activeTabBtn.id;
  // 根据ID执行不同页面跳转
  switch(selectedTabId) {
    case "tab-domestic":
      window.location.href = "/domestic-flights";
      break;
    case "tab-international":
      window.location.href = "/international-flights";
      break;
    case "tab-charter":
      window.location.href = "/charter-flights";
      break;
    default:
      console.log("未知的Tab选项ID");
  }
}

方法二：Bootstrap官方API（需引入Bootstrap JS）

如果项目中已经加载Bootstrap的JavaScript，可以通过Tab实例直接获取激活元素：

function Search() {
  // 获取Tab组件实例
  const tabInstance = bootstrap.Tab.getOrCreateInstance(document.getElementById("FlightType"));
  const activeTabBtn = tabInstance._activeElement;
  
  if (activeTabBtn) {
    const selectedTabId = activeTabBtn.id;
    // 跳转逻辑同方法一
  }
}