URL이있는 탭에 연결하는 부트 스트랩

Question

부트 스트랩 3으로 작업 중이며 URL을 특정 탭에 연결하는 데 문제가 있습니다. 패널은 변경되지만 활성화 된 탭은 나을 수 없습니다. 그래서 <a href="#tab2" data-toggle="tab">link</a> 행을 tab2로 이동하려고하지만 탭 2의 패널로만 이동합니다. 탭을 활성화하지 않습니다.

<div class="tabbable"> 
<ul class="nav nav-tabs"> 
    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li> 
    <li><a href="#tab2" data-toggle="tab">Section 2</a></li> 
    <li><a href="#tab3" data-toggle="tab">Section 3</a></li> 
</ul> 

<div class="tab-content"> 
    <div class="tab-pane active" id="tab1"> 
    <p><a href="#tab2" data-toggle="tab">link</a>.</p> 
    </div> 

    <div class="tab-pane" id="tab2"> 
    <p> I'm in Section 2.</p> 
    </div> 

<div class="tab-pane" id="tab3"> 
    <p>Howdy, I'm in Section 3 </p> 
    </div> 
</div> 
</div> 

당신은이 링크 http://bootply.com/90412

Answer 1

. 당신은이 링크를 확인하실 수 있습니다

$(function() { 
    $('#tab1 a').click(function (e) { 
     e.preventDefault(); 
     $('a[href="' + $(this).attr('href') + '"]').tab('show'); 
    }) 
}); 

: 그래서 당신은 탭을 사용하려면 프로그램에 jQuery 코드의 조각을 추가 할 수 있습니다 Updated code

Answer 2

탭의 활성화는 UL 구조의 의존이를 테스트 할 수 있습니다 : 여기

는 HTML입니다. 귀하의 예제의 경우 당신은 (부트 스트랩의 자바 스크립트 후) 문서의 끝 부분에 추가하여 플러그인의 클릭 이벤트를 덮어 쓸 수 있습니다 :

$(function(){ 
    $(document).on('click.bs.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) { 
    e.preventDefault() 
    if($(this).parent().prop('tagName')!=='LI') 
    { 

     $('ul.nav li a[href="' + $(this).attr('href') + '"]').tab('show'); 
    } 
    else 
    { 
     $(this).tab('show') 
    } 
    }) 
}); 

참조 : Get element type with jQuery

주 : 짧은 버전도 작동합니다 이 경우 : bootstrap에서와 같이 jQuery 플러그인을 사용할 수있는 탭을 활성화하기 위해

$(function(){ 
    $(document).on('click.bs.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) { 
    e.preventDefault() 
    $('ul.nav li a[href="' + $(this).attr('href') + '"]').tab('show'); 
}) 
}); 

Answer 3

처럼 Rohitha의 답변을하지만, 좀 더 일반적인 :

$(function() { 
    $('a.link-to-tab').click(function (e) { 
    e.preventDefault(); 
    $('a[href="' + $(this).attr('href') + '"]').tab('show'); 
    }) 
}); 

앵커 태그는 class="link-to-tab"이고 탭 ID는 href로 표시됩니다. 예 : <a class="link-to-tab" href="#tab2">.