I am using Twitter Bootstrap for a tabular interface. When I click on a tab, I am calling an function that hides and shows corresponding divs. This is my HTML Code:

<ul class="nav nav-tabs">
    <li class="active" id="Chart1"><a href="#">Chart 1</a></li>
    <li  id="Chart2"><a href="#">Chart 2</a></li>
    <li  id="Chart3"><a href="#">Chart 3</a></li>
    <li  id="Chart4"><a href="#">Chart 4</a></li>
  </ul>

Based on that, I am using the following jquery to show and hide content:

$(document).ready(function(){
   $("#pie").hide();
   $("#bar").hide();
   $("#Chart2").click(function(){
     $("#StateWise").hide();
     $("#pie").show();
   });
   $("#Chart3").click(function(){
       $("#StateWise").hide();
       $("#pie").hide();
       $("#bar").show();
   });
});

How can I do that on click, the active class changes to that particular tab?

I am using Twitter Bootstrap for a tabular interface. When I click on a tab, I am calling an function that hides and shows corresponding divs. This is my HTML Code:

<ul class="nav nav-tabs">
    <li class="active" id="Chart1"><a href="#">Chart 1</a></li>
    <li  id="Chart2"><a href="#">Chart 2</a></li>
    <li  id="Chart3"><a href="#">Chart 3</a></li>
    <li  id="Chart4"><a href="#">Chart 4</a></li>
  </ul>

Based on that, I am using the following jquery to show and hide content:

$(document).ready(function(){
   $("#pie").hide();
   $("#bar").hide();
   $("#Chart2").click(function(){
     $("#StateWise").hide();
     $("#pie").show();
   });
   $("#Chart3").click(function(){
       $("#StateWise").hide();
       $("#pie").hide();
       $("#bar").show();
   });
});

How can I do that on click, the active class changes to that particular tab?

• javascript
• jquery
• html
• twitter-bootstrap

• Why are you not using getbootstrap./javascript/#tabs for your tabbed interface. if you use this you don't have to write your own js for this – Sandeeproop Commented Apr 28, 2015 at 6:39
• Why don't you use the bootstrap way? – Amal Ts Commented Apr 28, 2015 at 6:40

4 Answers 4

You can write like this:

$("#Chart2").click(function() {

    $(".active").removeClass("active");
    $(this).addClass("active");
        $("#StateWise").hide();
    $("#pie").show();

});

$("#Chart3").click(function() {

    $(".active").removeClass("active");
    $(this).addClass("active");
        $("#StateWise").hide();
    $("#pie").hide();
    $("#bar").show();

});

Try this

$("#Chart3").click(function(){
     $('li.active').removeClass('active');
    $('this').addClass('active');
});

If you are using bootstrap 4 then you can do like this.

$("#Chart1").click(function(){
 $('#Chart1').tab('show');
});

check the below reference

https://getbootstrap./docs/4.3/ponents/navs/#tabshow

Try

$("#Chart1").click(function(){
     $('li.active').removeClass('active');
    $('this').addClass('active');
});