试图使用twitter引导实施“下一步”按钮引导-tabs.js

Question

我正在使用Twitter的引导程序，并使用bootstrap-tabs.js实施了一些帮助屏幕的基本选项卡。我很惊讶，我找不到任何有关如何创建“下一个”按钮的文档。我想创建一个单独的“下一个”按钮来遍历所有选项卡（例如：$（'＃next_tour'），如下所示）。有关如何实现这个JavaScript的任何想法？

aside/comment：我还注意到片段标识符没有被添加到带有bootstrap解决方案的url中 - 这也许很好。 （该功能它使我考虑这个：http://flowplayer.org/tools/demos/tabs/ajax-history.html代替，但我现在未定）

<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

答案就在这里 http://twitter.github.com/bootstrap/javascript.html#tabs 但尝试下面的代码

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

Answer 2

这里是我想到了，你可以改变的只有两个选择（a[data-toggle="tab"]，._tabs_navigation）来指定，如果你有一组以上的按钮开关，标签：

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

标记为按钮，只有类_tabs_navigation是很重要的：

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

工作实施例： http://jsfiddle.net/gEn8f/2/

Answer 3

我给自举3.0（仅下一页）变体：

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