2013-10-04 3 views
1

트위터 부트 스트랩 예제의 일반 탭 섹션에서 작업하는 것 외에도 데이터 탭에 액세스하기 위해 페이지 상단에 링크를 추가하려고합니다.여러 위치에서 부트 스트랩 탭을 호출하십시오.

나는 부트 스트랩을 통해 다음과 같은 기본 탭이 :

<ul class="nav nav-tabs"> 
    <li><a href="#news" data-toggle="tab" class=""><span class="glyphicon glyphicon-comment"></span> Latest News</a> 
    </li> 
    <li><a href="#people" data-toggle="tab" class=""><span class="glyphicon glyphicon-user"></span> The People</a> 
    </li> 
    <li><a href="#agenda" data-toggle="tab" class=""><span class="glyphicon glyphicon-calendar"></span> Agenda</a> 
    </li> 
    <li><a href="#messages" data-toggle="tab" class=""><span class="glyphicon glyphicon-plane"></span> Accommodations</a> 
    </li> 
    <li><a href="#faq" data-toggle="tab" class=""><span class="glyphicon glyphicon-comment"></span> FAQ</a> 
    </li> 
</ul> 
<!-- End tabs --> 

여기 컨텐츠의 샘플 :

<div class="tab-content"> 
    <div class="tab-pane active" id="news"> 
     <div class="span5"> 
      <ul class="green-checks"> 
       <li> 
        <div class="panel panel-info">Information coming soon!</div> 
       </li> 
       <!--<li><cite>May 24, 2013 &mdash; </cite>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>--> 
      </ul> 
     </div> 

난 할 노력하고있어 것은 물론 헤더 탐색을 통해 탭 전화입니다 탭 섹션 자체 에서처럼 이 같은 코드가 작동하지 않는 복제 :

<li class="menu-item"><a href="#people" data-toggle="tab" class="">The People</a></li> 

답변

0

편집을 - 클릭 후 탭으로 스크롤을 포함하도록 업데이트되었습니다.


대신 click()하여 탭 스위치를 시뮬레이션 : 도움을

function tabClick(tab) { 
    $('a[href='+tab+']').click(); 
    $(tab).animate({scrollTop:0}, 'fast'); 
} 

은 ...

<li class="menu-item"> 
    <a href="#" onclick="tabClick('#people');return false;" data-toggle="tab" class="">The people</a> 
</li> 
+0

감사합니다. 그러면 탭이 변경됩니다. 이제 코드가 추가되어 페이지가 탭이있는 위치로 바로 이동합니다. – user2429713

+0

@ user2429713, 업데이트 – davidkonrad

+0

을 참조하십시오. 매우 감사. – user2429713

관련 문제