Làm thế nào để tạo ra một nút "bên cạnh" mà chuyển sang tab sử dụng Java Script và Twitter Bootstrap

Question

Tôi có đoạn mã sau: http://jsfiddle.net/h6rQ2/2/

Tôi đang sử dụng html để tạo ra một hình thức cơ bản. Biểu mẫu này có hai phần - mỗi phần được chứa trong một tab (các tab được tạo bằng Twitter Bootstrap).

Làm cách nào để tạo nút "tiếp theo" chuyển từ tab đầu tiên sang tab thứ hai? Khi tôi thử làm ngay bây giờ, nó chỉ gửi biểu mẫu. Twitter Bootstrap đã cung cấp một chức năng cho phép bạn chuyển đổi các tab thông qua một nút bên ngoài? Nếu vậy, làm thế nào để bạn sử dụng nó?

Answer 1

Với những nút:

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

Bạn sẽ cần điều này 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'); 
}); 

Working demo (jsfiddle)

Answer 2

Để làm cho nó cyclic (tab cuối cùng đi vào đầu tiên, tab đầu tiên đi sẽ kéo dài), đây là mã của tôi:

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

Answer 3

Đối bootstrap 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"); 
}) 

Bạn có thể thêm các liên kết như thế này ở bất cứ đâu

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