web-dev-qa-db-ja.com

JavaスクリプトとTwitter Bootstrap）を使用してタブを切り替える「次へ」ボタンを作成する方法

私は次のコードを持っています： http://jsfiddle.net/h6rQ2/2/

基本的なフォームを作成するためにhtmlを使用しています。このフォームには2つのセクションがあります。各セクションはタブ（Twitter Bootstrapで作成されたタブ）内に含まれています。

最初のタブから2番目のタブに切り替わる「次へ」ボタンを作成するにはどうすればよいですか？今すぐやってみると、フォームを送信するだけです。 Twitter Bootstrapは、外部ボタンを介してタブを切り替えることができる機能をすでに提供していますか？もしそうなら、どのように使用しますか？

javascripthtmlbuttontwitter-bootstrap
13
goelv

それらのボタンを考えると：

<div class="btn-group">
    <button class="btn" id="prevtab" type="button">Prev</button>
    <button class="btn" id="nexttab" type="button">Next</button>
</div>

このJSが必要です：

var $tabs = $('.tabbable li');

$('#prevtab').on('click', function() {
    $tabs.filter('.active').prev('li').find('a[data-toggle="tab"]').tab('show');
});

$('#nexttab').on('click', function() {
    $tabs.filter('.active').next('li').find('a[data-toggle="tab"]').tab('show');
});

作業デモ（jsfiddle）

28
Sherbrow

循環させるために（最後のタブが最初に移動し、最初のタブが最後に移動します）、ここに私のコードがあります：

function previousVin(){
    var previousElement = $('#myTab li').filter('.active').prev('li').find('a[data-toggle="tab"]');
    if(previousElement.html()===undefined){
        $('#myTab a:last').tab('show');
    }else{
        previousElement.tab('show');
    }
}
function nextVin(){
    var nextElement = $('#myTab li').filter('.active').next('li').find('a[data-toggle="tab"]');
    if(nextElement.html()===undefined){
        $('#myTab a:first').tab('show');
    }else{
        nextElement.tab('show');
    }
}
0
hugsbrugs