JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
<div class="btn-toolbar clearfix">
<div class="btn-group pull-left _tabs_navigation" data-toggle="buttons-radio">
<a class="btn btn-small btn-info" href="#">
<i class="icon-arrow-left icon-white"></i>
</a>
<a class="btn btn-small btn-info" href="#">
<i class="icon-arrow-right icon-white"></i>
</a>
</div>
</div>
<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
<li class="active">
<a href="#column-33" data-toggle="tab">
First tab
</a>
</li>
<li>
<a href="#column-34" data-toggle="tab">
Second one
</a>
</li>
<li>
<a href="#column-35" data-toggle="tab">
Third and last
</a>
</li>
</ul>
<div class="tab-content">
<div id="column-33" class="tab-pane active" data-id="33">
<p>
first tab content
</p>
</div>
<div id="column-34" class="tab-pane" data-id="34">
<p>
Nullam tempus rutrum justo eu luctus. Aliquam magna dolor, venenatis eget bibendum quis, imperdiet id
enim. Vivamus sagittis, dui eu iaculis dictum, nunc diam hendrerit nunc, id tempor nunc diam eu elit.
Sed ultrices odio nec mi faucibus bibendum nec non sapien. Curabitur vitae odio vel urna viverra ornare
at vitae sem. Donec ac quam eu enim faucibus porta id non dolor. In hac habitasse platea dictumst. Morbi
ornare tincidunt adipiscing. Pellentesque scelerisque nisl id tortor euismod id fringilla metus
adipiscing. Mauris ultricies aliquam porta. Proin ut molestie arcu.
</p>
...
JavaScript
$(document).ready(function() {
var tabIndex;
var tabs = $('a[data-toggle="tab"]');
tabs.on('shown', function(e) {
tabIndex = $(e.target).closest('li').index();
}).eq(0).trigger('shown');
$('._tabs_navigation').on('click', 'a', function() {
var index = tabIndex + ($(this).index() ? 1 : -1);
if (index >= 0 && index < tabs.length) {
tabs.eq(index).tab('show');
}
return false;
});
})