Как создать "следующую" кнопку, которая переключает вкладки с помощью Java Script и Twitter Bootstrap

У меня есть следующий код: http://jsfiddle.net/h6rQ2/2/

Я использую html для создания базовой формы. Эта форма состоит из двух разделов: каждый раздел содержится в вкладке (вкладки, созданные с помощью Twitter Bootstrap).

Как создать "следующую" кнопку, которая переключается с первой вкладки на вторую вкладку? Когда я пытаюсь сделать это прямо сейчас, он только отправляет форму. Загружает ли Twitter Bootstrap функцию, которая позволяет вам переключаться с помощью внешней кнопки? Если да, то как вы его используете?

Ответы

Ответ 1

Для этих кнопок:

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

Ответ 2

Чтобы сделать его циклическим (последняя вкладка идет первой, первая вкладка заканчивается), вот мой код:

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');
    }
}

Ответ 3

Для начальной загрузки 3

$('a[data-toggle^="tab"]').click(function(){
    var data = $(this).attr("href");
    $('a[data-toggle^="tab"]').parent("li").removeClass("active");
    $('li a[href^="'+data+'"]').parent("li").addClass("active");
    $('.tab-pane').removeClass("active");
    $(data).addClass("active");
})

Вы можете добавлять ссылки, подобные этим в любом месте

<a href="#tabname2" data-toggle="tab">Next</a>
<a href="#tabname1" data-toggle="tab">Previous</a>