尝试使用twitter bootstrap-tabs.js实现"下一步"按钮

Question

我正在使用Twitter的bootstrap,并使用bootstrap-tabs.js为一些帮助屏幕实现了基本选项卡.我很惊讶我找不到任何关于如何创建"下一个"按钮的文档.我想创建一个单独的"下一个"按钮来遍历所有选项卡(例如:$('#next_tour'),下面).关于如何为此实现javascript的任何想法？

抛开/评论:我还注意到片段标识符没有添加到带有引导程序解决方案的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

这就是我提出的,你可以改变只有两个选择器(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 2

答案在这里 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>