Active tab management in bootstrap

Question

I made tabs in 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 with a button or some action.

How can i do this?

Answer 1

using the boot buttons to go to the next | Previous

 <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'); }); 

Answer 2

You can use $ (selector) .tab ('show'); bootstrap writes about this in the documentation at http://getbootstrap.com/javascript/ . Check out my example here.

Update:

If you want it to be more dynamic when you create your buttons automatically. Example here

 $(document).ready(function() { $.each($("#tabs li a"), function(key, elm){ $("#buttons").append( $("<a/>") .text($(elm).text()) .addClass("btn") .click(function() { $(elm).tab('show'); }) ); }); });