每次在页面中从一个选项卡切换到另一个选项卡时，我都需要获取活动选项卡窗格的id，并根据它是哪个选项卡窗格（tab-pane 1、tab-pane 2、tab-pane 3），将其存储（tab-pane 1 = 1，依此类推）在一个变量中并在控制台中显示它。
使用普通的JS或jQuery都可以。
我的代码如下所示

<ul class="nav nav-tabs nav-success" role="tablist">
 <li class="nav-item" role="presentation">
  <a class="nav-link active" data-bs-toggle="tab" href="#tab-pane1" role="tab" aria-selected="true">
   <div class="d-flex align-items-center">
     <div class="tab-title">tab-pane1
     </div>
   </div>
  </a>
 </li>
 <li class="nav-item" role="presentation">
  <a class="nav-link" data-bs-toggle="tab" href="#tab-pane2" role="tab" aria-selected="false" tabindex="-1">
   <div class="d-flex align-items-center">
    <div class="tab-title">tab-pane2
    </div>
   </div>
  </a>
 </li>
 <li class="nav-item" role="presentation">
  <a class="nav-link" data-bs-toggle="tab" href="#tab-pane3" role="tab" aria-selected="false" tabindex="-1">
   <div class="d-flex align-items-center">
    <div class="tab-icon">
    </div>
    <div class="tab-title">tab-pane3
    </div>
   </div>
  </a>
 </li>
</ul>
<div class="tab-content py-3">
 <div class="tab-pane fade active show" id="tab-pane1" role="tabpanel">
  <!-- content tab-pane1 -->
 </div>
 <div class="tab-pane fade" id="tab-pane2" role="tabpanel">
  <!-- content tab-pane2 -->
 </div>
 <div class="tab-pane fade" id="tab-pane3" role="tabpanel">
  <!-- content tab-pane3 -->
 </div>

我的jQuery如下所示。

console.log($(".tab-pane.active").attr("id"));