I have a code here:

<ul class="nav nav-pills nav-justified" id="pills-COD">
     <li class="active"><a data-toggle="tab" href="#a">Class A</a></li>
     <li><a data-toggle="tab" href="#b">Class B</a></li>
     <li ><a data-toggle="tab" href="#c">Class C</a></li>
    <li><a data-toggle="tab" href="#d">Class D</a></li>
</ul>

<div class="tab-content">
  <div id="a" class="tab-pane fade in active">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="b" class="tab-pane fade">
   <h3>Menu 1</h3>
   <p>Some content in menu 1.</p>
  </div>

  <div id="c" class="tab-pane fade">
   <h3>Menu 2</h3>
   <p>Some content in menu 2.</p>
  </div>
</div>

I need to get the id of the active tab whenever the pill is clicked using jQuery. For example, I need to get the value "a" whenever li, "Class A" is clicked.

I have found other researches made here in stack overflow, but .tabs() is not working for me in jQuery. Other solutions also show the href value, but I need tag id of the active tab.

I have a code here:

<ul class="nav nav-pills nav-justified" id="pills-COD">
     <li class="active"><a data-toggle="tab" href="#a">Class A</a></li>
     <li><a data-toggle="tab" href="#b">Class B</a></li>
     <li ><a data-toggle="tab" href="#c">Class C</a></li>
    <li><a data-toggle="tab" href="#d">Class D</a></li>
</ul>

<div class="tab-content">
  <div id="a" class="tab-pane fade in active">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="b" class="tab-pane fade">
   <h3>Menu 1</h3>
   <p>Some content in menu 1.</p>
  </div>

  <div id="c" class="tab-pane fade">
   <h3>Menu 2</h3>
   <p>Some content in menu 2.</p>
  </div>
</div>

I need to get the id of the active tab whenever the pill is clicked using jQuery. For example, I need to get the value "a" whenever li, "Class A" is clicked.

I have found other researches made here in stack overflow, but .tabs() is not working for me in jQuery. Other solutions also show the href value, but I need tag id of the active tab.

• javascript
• jquery
• html
• css
• twitter-bootstrap

• What exactly is the problem? – Maritim Commented Sep 3, 2017 at 5:43
• Wele to StackOverflow! Please note that you are expected to have researched your issue and made attempts to write the code yourself before posting, and include a summary of what you have tried so far. Please read How much research effort is expected of Stack Overflow users – FluffyKitten Commented Sep 3, 2017 at 8:14
• Thank you very much. I am new to stack overflow that's why I didn't know that I have to post the attempts I made. I already tried other solutions found here but the don't work because .tabs() is not working for me in jquery. – Earl. Fojas Commented Sep 4, 2017 at 4:47

3 Answers 3

On click of the anchor, you need get the href attribute without the # like this:

$(this).attr("href").replace("#", "") 

attr("href") gets the href value from the clicked anchor. And replace, replaces the # with empty string.

Here's a snippet:

$("ul.nav-pills > li > a").click(function() {
  console.log( 
    $(this).attr("href").replace("#", "") 
  )
});

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="nav nav-pills nav-justified" id="pills-COD">
  <li class="active"><a data-toggle="tab" href="#a">Class A</a></li>
  <li><a data-toggle="tab" href="#b">Class B</a></li>
  <li><a data-toggle="tab" href="#c">Class C</a></li>
  <li><a data-toggle="tab" href="#d">Class D</a></li>
</ul>

<div class="tab-content">
  <div id="a" class="tab-pane fade in active">
    <h3>HOME</h3><p>Some content.</p>
  </div>
  <div id="b" class="tab-pane fade">
    <h3>Menu 1</h3> <p>Some content in menu 1.</p>
  </div>

  <div id="c" class="tab-pane fade">
    <h3>Menu 2</h3> <p>Some content in menu 2.</p>
  </div>
</div>

If you want to find it looking at the list, you can do this:

var $activeLi = $('#pills-COD li.active');
var activeId = $activeLi.children('a').attr('href').substr(1);

Or, looking at the tabs:

var $activeTab = $('.tab-content .tab-pane.active');
var activeId = $activeTab.attr('id');

I was having the same problem and couldn't access the value of the clicked nav-item, Then I tried the below code, and it worked.

Html for nav-tabs:

    <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" data-bs-toggle="tab" role="tab" href="#info-time-sheets">
                            <span class="d-none d-sm-block">@L("Info")</span>
                        </a>
                    </li>
                    <li class="nav-item" id="tab-non-processed" >
                        <a class="nav-link" data-bs-toggle="tab" role="tab" href="#non-processed">
                            <span class="d-none d-sm-block">@L("Non processed ")</span>
                        </a>
                    </li>
                    <li class="nav-item" id="tab-previous-time-sheets">
                        <a class="nav-link" data-bs-toggle="tab" role="tab" href="#previous-time-sheets">
                            <span class="d-none d-sm-block">@L("Previous Timesheets")</span>
                        </a>
                    </li>
                </ul>

I got using e.currentTarget.id for id

$('.nav-tabs li').on('click', (e) => {
       
        if ((e.currentTarget.id === "tab-non-processed") || (e.currentTarget.id === "tab-previous-time-sheets")) {
            $("#generate-documents").show();
            $("#preview-timesheet").show();
        }
        else {
            $("#generate-documents").hide();
            $("#preview-timesheet").hide();
        }
    });