jQuery : how to get id of current activated tab

Question

I have some tabs as below

I need to get the id of currently activated tab, and i tried so many ways , still no luck ,

1. $('ul#apptabs li a').find('active').attr('id')
2. $('ul#apptabs li a.active').attr('id')
3. $('ul#apptabs nav-item').find('a.active').attr('id')

Snippet:

console.log(
  $('ul#apptabs li a').find('active').attr('id'),
  $('ul#apptabs li a.active').attr('id'),
  $('ul#apptabs nav-item').find('a.active').attr('id')
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="apptabs" class="nav nav-pills" role="tablist" style="margin:0px">
  <li id="map_control" class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#m_tabs_1_1">Map</a>
  </li>
  <li id="feature_control" class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#m_tabs_1_3">Feature</a>
  </li>
  <li id="analysis" class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#m_tabs_1_4">Analysis</a>
  </li>
  <li id="editing_control" class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#m_tabs_1_5">Editing</a>
  </li>
  <li id="general_div" class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#m_tabs_1_6">General</a>
  </li>
</ul>

not a duplicate question ,this answer will not fit to my need , i tried that already . https://stackoverflow.com/questions/1864219/need-currently-selected-tab-id-for-jquery-tabs — AhammadaliPK, Jul 03 '18 at 09:08

score 2 · Answer 1 · answered Jul 03 '18 at 08:25

I hope that I get your question right.

You want the id of the <li> right?

The active state is however on the <a>, which is a child of the <li>. So you need to travel up the DOM tree to find the list-item. You can do that with closest().

console.log(
  $('ul#apptabs li a.active').closest('li').attr('id')
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="apptabs" class="nav nav-pills" role="tablist" style="margin:0px">
  <li id="map_control" class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#m_tabs_1_1">Map</a>
  </li>
  <li id="feature_control" class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#m_tabs_1_3">Feature</a>
  </li>
  <li id="analysis" class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#m_tabs_1_4">Analysis</a>
  </li>
  <li id="editing_control" class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#m_tabs_1_5">Editing</a>
  </li>
  <li id="general_div" class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#m_tabs_1_6">General</a>
  </li>
</ul>

Or an alternative:

$('ul#apptabs li').has('a.active').attr('id')

console.log(
  $('ul#apptabs li').has('a.active').attr('id')
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="apptabs" class="nav nav-pills" role="tablist" style="margin:0px">
  <li id="map_control" class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#m_tabs_1_1">Map</a>
  </li>
  <li id="feature_control" class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#m_tabs_1_3">Feature</a>
  </li>
  <li id="analysis" class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#m_tabs_1_4">Analysis</a>
  </li>
  <li id="editing_control" class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#m_tabs_1_5">Editing</a>
  </li>
  <li id="general_div" class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#m_tabs_1_6">General</a>
  </li>
</ul>

I would advice `.parent()` on this one since we already know that the current element is an ``. — Ron van der Heijden, Jul 03 '18 at 08:31
You are right Ron, in this specific case. It may be noted that when the OP adds an extra element, `parent()` won't work, but `closest()` will. — GreyRoofPigeon, Jul 03 '18 at 11:18

score 2 · Accepted Answer · answered Jul 03 '18 at 08:26

One possible way is to return to the parent node

console.log($('ul#apptabs li a.active').parent().attr('id'))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="apptabs" class="nav nav-pills" role="tablist" style="margin:0px">
  <li id="map_control" class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#m_tabs_1_1">Map</a>
  </li>
  <li id="feature_control" class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#m_tabs_1_3">Feature</a>
  </li>
  <li id="analysis" class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#m_tabs_1_4">Analysis</a>
  </li>
  <li id="editing_control" class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#m_tabs_1_5">Editing</a>
  </li>
  <li id="general_div" class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#m_tabs_1_6">General</a>
  </li>
</ul>

jQuery : how to get id of current activated tab

2 Answers2