Control active tab on bootstrap

jquery, twitter-bootstrap

Solution

using bootstrap buttons to navigate next | Prev

<div class="btn-group">
    <button class="btn" id="prevtab" type="button">Prev</button>
    <button class="btn" id="nexttab" type="button">Next</button>
</div>

then in your javascript just add

var $tabs = $('.tabbable li');

$('#prevtab').on('click', function() {
    $tabs.filter('.active')
         .prev('li')
         .find('a[data-toggle="tab"]')
         .tab('show');
});

$('#nexttab').on('click', function() {
    $tabs.filter('.active')
         .next('li')
         .find('a[data-toggle="tab"]')
         .tab('show');
});

Problem

I made tabs on bootstrap. ``` <div class="tabbable tabs-left"> <ul class="nav nav-tabs"> <li><a href="#menu23" data-toggle="tab">Beethoven</a></li> <li><a href="#menu24" data-toggle="tab">Bach</a></li> </ul> <div class="tab-content"> <div class="tab-pane" id="menu23"> item1 </div> <div class="tab-pane" id="menu24"> item2 </div> </div> ``` I want to activate item1 or item2 by button or some action. How can I make it ?

Original source