CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Neo
Neo

Reputation: 16219

add active class to bootstrap tab on button click

I have one button and bootstrap tab.

on click of button want to add class active to first tab element.

I'm generating all tab elements dynamically , and want to active only very first tab element on button click. MyButton

 <ul class="nav nav-tabs">
                            <li><a href="#divArea1" data-toggle="tab">div1<i class="fa"></i></a></li>
                            <li><a href="#divArea2" data-toggle="tab">div2 <i class="fa"></i></a></li>
                        </ul>

Upvotes: 0

Views: 4975

Answers (2)

monkey
monkey

Reputation: 1279

try this:

$('#MyButton').click(function() {
 $('.nav-tabs a:first').tab('show');
});

Upvotes: 1

michelem
michelem

Reputation: 14590

Here is a JSFiddle, clicking the button you have the first tab with class active:

HTML:

<ul class="nav nav-tabs">
    <li><a href="#divArea1" data-toggle="tab">div1<i class="fa"></i></a>
    </li>
    <li><a href="#divArea2" data-toggle="tab">div2 <i class="fa"></i></a>
    </li>
</ul>

<button class="btn btn-default clickme">Click</button>

JS:

$(document).ready(function () {
    $('.clickme').click(function () {
        $('.nav-tabs li:first').addClass('active');
    });
});

Upvotes: 1

Related Questions