2012-10-01 2 views
1

내 웹 페이지에서 세 가지 양식에 대해 tabbable 탐색을 만들려고합니다. 자바 스크립트를 탭으로 사용할 수 없습니다. 트위터 문서에는 두 가지 스크립트가 있습니다.Tabbable Navs Javascript를 Twitter Bootstrap에서 사용

$('#myTab a').click(function (e) { 
    e.preventDefault(); 
    $(this).tab('show'); 
}) 

$('#myTab a[href="#profile"]').tab('show'); // Select tab by name 
$('#myTab a:first').tab('show'); // Select first tab 
$('#myTab a:last').tab('show'); // Select last tab 
$('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed) 

이 문서에 주어진 tabbable의 NAVS에 대한 HTML이다.

<div class="tabbable"> <!-- Only required for left/right tabs --> 
    <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> 
    </ul> 
    <div class="tab-content"> 
    <div class="tab-pane active" id="tab1"> 
     <p>I'm in Section 1.</p> 
    </div> 
    <div class="tab-pane" id="tab2"> 
     <p>Howdy, I'm in Section 2.</p> 
    </div> 
    </div> 
</div> 

두 탭 중 하나를 클릭 할 때 적절한 콘텐츠를 표시하려면 어떻게 웹 페이지에서 두 코드 블록을 사용합니까? 나는 자바 스크립트 초보자입니다. 그냥 일을 끝내고 싶다.

답변

3

각 탭의 data-toggle = 'tab'속성 때문에 탭을 개별적으로 활성화하지 않아도됩니다. 페이지에 bootstrap.js 파일을 추가했는지 확인하십시오.

원하는 경우 다음 예를 살펴볼 수 있습니다. http://jsfiddle.net/voytko/TVUPF/

관련 문제