How to get active tabpane id

Question

I need to get the id of the active tab-pane every time that I change from tab to tab in my page and, depending on which tab-pane it is(tab-pane1,tab-pane2,tab-pane3), store(tab-pane1 = 1 and so on) in a variable and display it in the console.

Using vanilla JS or jQuery, both are fine.

my code looks like this

<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>

My jQuery looks like this.

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

Where is your JavaScript? Please add that to this, I recommend creating a code fiddle (the <> icon on the question editor) so your issue can be reproduced effectively. — Nathaniel Flick, Nov 24 '22 at 18:23
This question has been asked before, see the answer with 2900+ upvotes here: https://stackoverflow.com/questions/3239598/how-can-i-get-the-id-of-an-element-using-jquery. And with Bootstrap you can use the shown bs tab event: https://getbootstrap.com/docs/5.0/components/navs-tabs/#events rather than writing your own. — Nathaniel Flick, Nov 24 '22 at 19:04
Solution given works onload only, I require the id everytime that I change from tab to tab. — SOUserNumber613, Nov 24 '22 at 19:09

4b0 · Accepted Answer · 2022-12-01T07:05:45.923

You can use class shown.bs.tab to get active tab number. Get active tab href attribute and slice to get desire result.

Example:

console.log($("a.active").attr("href").slice(-1)); // Get value when page load if needed
$('a[data-bs-toggle="tab"]').on('shown.bs.tab', function(e) {
  var result = $(e.target).attr("href").slice(-1); // get activ tab number
  console.log(result);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />

<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>

Note: there is not attribute id on anchor tag so why I catch href attribute and slice.

How to get active tabpane id

1 Answers1