javascript - bootstrap - 자바 스크립트와 트위터 부트 스트랩을 사용하여 탭을 전환하는 "다음"버튼을 만드는 방법



bootstrap input add button (2)

나는 다음 코드를 가지고 : http://jsfiddle.net/h6rQ2/2/

html을 사용하여 기본 양식을 만듭니다. 이 양식에는 두 개의 섹션이 있습니다. 각 섹션은 탭 (Twitter 부트 스트랩으로 작성된 탭) 내에 있습니다.

첫 번째 탭에서 두 번째 탭으로 전환하는 "다음"버튼은 어떻게 만듭니 까? 지금 당장 해보려고하면 양식을 제출하기 만하면됩니다. Twitter Bootstrap은 이미 외부 버튼을 통해 탭을 전환 할 수있는 기능을 제공합니까? 그렇다면 어떻게 사용합니까?

https://ffff65535.com


버튼이 주어 졌을 때 :

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


부트 스트랩 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>




twitter-bootstrap