부트 스트랩 3.0.2 - 한 탭의 콘텐츠를 다른 탭의 콘텐츠에 연결

Question

다른 탭의 콘텐츠와 한 탭 사이의 링크를 만들어야합니다. 예를 들어 개요 탭이 있고 갤러리 탭의 특정 이미지에 연결하려는 경우, 즉 링크를 클릭하면 다른 탭이 활성화되어 갤러리의 올바른 위치로 이동해야합니다.

나는 여기에 코드 http://jsfiddle.net/tyec07rx/

<div class="container"> 
    <div class="row"> 
     <div class="container"> 
      <ul class="nav nav-pills" role="tablist"> 
       <li class="active"><a href="#overview-panel" role="tab" data-toggle="tab">Overview</a></li> 
       <li><a href="#gallery-panel" role="tab" data-toggle="tab">Gallery</a> </li> 
      </ul> 
     </div> 

     <div class="tab-content"> 
      <div id="overview-panel" class="tab-pane active"> 
       <p>We have new <a href="#sticker-packs">sticker kits</a> for your capri.</p> 
       <p>Options:</p> 
       <ul> 
        <li><a href="#target">Target</a></li> 
        <li>British flag</li> 
        <li>Stripes</li> 
       </ul> 
      </div> 
     <div id="gallery-panel" class="tab-pane"> 
      <p>Image of sticker packs to go here</p> 
      <p class="sticker-packs">Clicked link from Overview should get here...</p> 

      <ul> 
       <li class="target">Target sticker image (click through from Overview should get here)</li> 
       <li>British sticker image</li> 
       <li>Stripe sticker image</li> 
      </ul> 

     </div>   
    </div> 
</div> 

Answer 1

은 당신이 원하는 것은 두 단계 절차 : -> 열린 탭 - 내용

링크> 부트 스트랩으로

이 기본적으로 수행 할 수없는 컨텐츠로 스크롤합니다. 이를 위해 각 링크가 목표로하는 탭과 스크롤 할 요소의 ID를 알아야합니다. href가 .tab-content에서 대상의 id이며, data-tab 우리가 열고 자하는 탭의 ID입니다

<li><a href="#target" data-tab="#gallery-panel">Target</a></li> 

에 위의 링크를 변경합니다. 우리는 지금 탭 스위치와 최종 스크롤 수행하는 클릭 기능을 구현할 수 있습니다 : 당신이 다른 탭에 대한 링크를 갖고 싶어 지금

$("a[data-tab]").on('click', function() { 
    var tab = $(this).attr('data-tab'), 
     target = $(this).attr('href'); 
    $('ul.nav a[href="' + tab + '"]').tab('show'); 
    $('html, body').animate({ 
     scrollTop: $(target).offset().top 
    }, 1);  
}); 

를, 당신이 필요 data-tab 물론 유효한 id을 정의하는 것입니다 href. >http://jsfiddle.net/k5Lv95L1/

Answer 2

로드이 시도 :

DEMO

HTML ::

<div class="container"> 
    <div class="row"> 
     <div class="container"> 
      <ul class="nav nav-pills" role="tablist"> 
       <li class="active"><a href="#overview-panel" role="tab" data-toggle="tab">Overview</a></li> 
       <li><a id="li" href="#gallery-panel" role="tab" data-toggle="tab">Gallery</a> </li> 
      </ul> 
     </div> 

     <div class="tab-content"> 
      <div id="overview-panel" class="tab-pane active"> 
       <p>We have new <a href="#sticker-packs">sticker kits</a> for your capri.</p> 
       <p>Options:</p> 
       <ul> 
        <li><a id="btn" href="#target">Target</a></li> 
        <li>British flag</li> 
        <li>Stripes</li> 
       </ul> 
      </div> 
      <div id="gallery-panel" class="tab-pane"> 
       <p>Image of sticker packs to go here</p> 
       <p class="sticker-packs">Clicked link from Overview should get here...</p> 

       <ul> 
        <li class="target">Target sticker image (click through from Overview should get here)</li> 
        <li>British sticker image</li> 
        <li>Stripe sticker image</li> 
       </ul> 

      </div> 
     </div> 
    </div> 
</div> 

SCRIPT :

$("#btn").click(function() { 
      $("#li").click(); 
     });