尝试实现'next'按钮使用twitter bootstrap-tabs.js

这是我想到的，你可以改变只有两个选择器(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/

我的Bootstrap 3.0版本(仅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>

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