부트 스트랩의 활성 탭 제어

Question

부트 스트랩에 대해 탭을 만들었습니다.

내가 버튼 또는 일부 작용에 의해 항목 1 또는 항목 2 활성화 할

<div class="tabbable tabs-left"> 
    <ul class="nav nav-tabs"> 
     <li><a href="#menu23" data-toggle="tab">Beethoven</a></li> 
     <li><a href="#menu24" data-toggle="tab">Bach</a></li> 
    </ul> 

    <div class="tab-content"> 
     <div class="tab-pane" id="menu23"> 
      item1 
     </div> 
     <div class="tab-pane" id="menu24"> 
      item2 
     </div> 
    </div> 

.

어떻게 만들 수 있습니까?

Answer 1

| 자바 스크립트에서 다음

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

그냥

를 추가 이전

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

Answer 2

$ (선택기) .tab ('show'); 부트 스트랩은 문서 http://getbootstrap.com/javascript/에 그것에 대해 글을 씁니다. Check my exemple here.

업데이트 : 당신이 당신의 버튼 자동차를 만드는 곳이 더 역동적하려면

. 다음을 탐색 할 수 부트 스트랩 버튼을 사용하여 Example here

$(document).ready(function() { 
    $.each($("#tabs li a"), function(key, elm){ 
    $("#buttons").append(
     $("<a/>") 
     .text($(elm).text()) 
     .addClass("btn") 
     .click(function() { 
      $(elm).tab('show'); 
     }) 
    ); 
    }); 
});