twitter bootstrap-tabs.jsを使用して「次へ」ボタンを実装しようとしています

Question

私はTwitterのブートストラップを使用しており、bootstrap-tabs.jsを使っていくつかのヘルプ画面の基本タブを実装しています。私は「次へ」ボタンを作成する方法に関するドキュメントを見つけることができなかったことに驚いていました。すべてのタブをループするための別の '次へ'ボタンを作成したいと思います（例：$（ '＃next_tour'））。これのためのjavascriptを実装する方法に関する任意のアイデアですか？

aside/comment：フラグメント識別子が、ブートストラップソリューションの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

は何をです私が思い付いたのは、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>