Twitter Bootstrap Question posted in

Twitter bootstrap – How do I set a bootstrap tab active?

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?

Tags:

4

Answers


  1. 0

    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();

});
    Login or Signup to reply.
  2. 0

    Try this

    $("#Chart3").click(function(){
     $('li.active').removeClass('active');
    $('this').addClass('active');
});
    Login or Signup to reply.
  3. 0

    Try

    $("#Chart1").click(function(){
     $('li.active').removeClass('active');
    $('this').addClass('active');
});
    Login or Signup to reply.
  4. 0

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

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

    check the below reference

    https://getbootstrap.com/docs/4.3/components/navs/#tabshow

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search