trying to implement a 'next' button using twitter bootstrap-tabs.js

Question

I'm using Twitter's bootstrap and have implemented basic tabs for some help screens using bootstrap-tabs.js. I was surprised that I couldn't find any documentation on how to create a 'next' button. I'd like to create a separate 'next' button to loop through all tabs(e.g: $('#next_tour'), below). Any ideas on how to implement the javascript for this?

aside/comment: I also noticed that fragment identifiers aren't added to the url with the bootstrap solution - which might be nice to have, too. (for that feature it's making me consider this: http://flowplayer.org/tools/demos/tabs/ajax-history.html instead, but I'm undecided right now.)

<div class="span11 columns">
    <div class="row">
          <div id="my-tab-content" class="tab-content">
            <div class="active tab-pane" id="home">
              <p>Raw denim</p>
            </div>
            <div class="tab-pane" id="sensors">
              <p>Food truck.</p>
            </div>
            <div class="tab-pane" id="encouragment">
              <p>Banksy.</p>
            </div>
            <div class="tab-pane" id="teammates">
              <p>biodiesel.</p>
            </div>
            <div class="tab-pane" id="privacy">
              <p>mollit.</p>
            </div>
          </div>
</div>
</div>      
<div class="span1 columns offset11">
    <div class="row">
        <a id="next_tour" class="button_blue" href="">Next</a>
    </div>
</div>

Answer 1

Here's what I came up with, you can alter the only two selectors (a[data-toggle="tab"], ._tabs_navigation) to specify which buttons switch which tabs if you have more than one set:

$(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;
    });
})​

Markup for buttons, only the class _tabs_navigation is important:

<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>

Working example: http://jsfiddle.net/gEn8f/2/

Answer 2

My variant for Bootstrap 3.0 (only Next):

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#base" data-toggle="tab">Base tab</a></li>
    <li><a href="#step2" data-toggle="tab">tab2</a></li>
    <li><a href="#step3" data-toggle="tab">tab3</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane fade in active" id="base">
        <p>This is content of Tab 1</p>
        <a href="#step2" onclick="javascript:tabNext(this);">Next &rarr;</a>
    </div>
    <div class="tab-pane fade" id="tab2">
        <p>This is content of Tab 2</p>
        <a href="#step3" onclick="javascript:tabNext(this);">Next &rarr;</a>
    </div>
    <div class="tab-pane fade" id="tab3">
        <p>This is content of Tab 3</p>
    </div>
</div>
<script>
$(document).ready(function() {
    $('#myTab a').click(function (e) {
      e.preventDefault();
      $(this).tab('show');
    })
    tabNext = function(e) {
      var nextTab = $(e).attr('href');
      $('#myTab a[href="' + nextTab + '"]').tab('show');
    }
})
</script>

Answer 3

the answer is here http://twitter.github.com/bootstrap/javascript.html#tabs but try the below code

<ul id="myTab" class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
    <li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
    <li><a href="#tab4" data-toggle="tab">Tab 4</a></li>
</ul>
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="tab1">
        <p>This is content of Tab 1</p>
    </div>
    <div class="tab-pane fade" id="tab2">
        <p>This is content of Tab 2</p>
    </div>
    <div class="tab-pane fade" id="tab3">
        <p>This is content of Tab 3</p>
    </div>
    <div class="tab-pane fade" id="tab4">
        <p>This is content of Tab 4</p>
    </div>
</div>
<div>
    <a href="javascript:tabPrev();" class="btn">&lsaquo; Prev</a>
    <a href="javascript:tabNext();" class="btn">Next &rsaquo;</a>
</div>
<script>
var myTab, myTabsActive, tabNext, tabPrev;
$(function() {
    myTabs = $('#myTab li').length;
    myTabsActive = 0; //or yours active tab

    tabNext = function() {
        var index = myTabsActive + 1;
        index = index >= myTabs ? 0 : index;

        $('#myTab li:eq(' + index + ') a').tab('show');
        myTabsActive = index;
    }

    tabPrev = function() {
        var index = myTabsActive - 1;
        index = index < 0 ? myTabs - 1 : index;

        $('#myTab li:eq(' + index + ') a').tab('show');
        myTabsActive = index;
    }
});
</script>