Trying to implement the "next" button using twitter bootstrap-tabs.js

Question

I use Twitter download and implemented basic tabs for some help screens using bootstrap-tabs.js. I was surprised that I could not find the documentation on how to create the "Next" button. I would like to create a separate "Next" button to iterate over all the tabs (for example: $ ('# next_tour'), ​​below). Any ideas on how to implement javascript for this?

Aside / comment: I also noticed that fragment identifiers are not added to the URL using the bootstrap solution, which is also nice to have. (for this function, it makes me consider this: http://flowplayer.org/tools/demos/tabs/ajax-history.html instead, but I haven't decided 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, what I came up with, you can only change two selectors ( a[data-toggle="tab"] , ._tabs_navigation ) to indicate which buttons switch those 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; }); })​ 

The markup for buttons is important only for the _tabs_navigation class:

 <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 option for Bootstrap 3.0 (only the following):

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

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