bootstrap data-toggle="tab" - how to make a tab active with a JS call

Question

I have a JSP page which uses bootstraps data-toggle="tab" functionality. Upon page load I make one tab active.

<ul class="nav st-nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">First Tab</a></li>
    <li><a href="#tab2" data-toggle="tab">Second Tab</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="tab1"></div>
    <div class="tab-pane active" id="tab2"></div>
</div>

I have a Highcharts chart on the page, whenever a user clicks on one of the columns I call a JS function which makes tab2 the active tab on the page. Inside this function I've tried a few different commands but none seem to work. I'm quite new to jQuery so I'm hoping someone might be able to point out where I'm going wrong with my syntax.

function handleClick(){
    //I've tried the following, none seem to work
    $('#tab2').toggleClass('active');
    $('#tab2').show();
    $('#tab2').tab('show');
}

Answer 1

First you need to give your tabs an id, i will call it myTabs:

<ul class="nav st-nav-tabs" id="myTabs">

Then you can call and show your tabs by name to show them:

$('#myTabs a[href="#name"]').tab('show');

You can read about tabs in bootstrap's documentation.