[bootstrap] 부트스트랩 – 탭(Tabs)에 이벤트 기능 추가

data 속성을 사용할 때 탭 목록의 각 a 태그에 data-toggle=”tab”을 추가했습니다. 자바스크립트를 사용할 때도 모든  a 태그에 대해서 .tab(‘show’) 메서드를 사용합니다. e.preventDefault();는 클릭했을 때 상단으로 이동하는 것을 방지합니다.

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

 

특정 탭을 활성화하기 위해 .active 선택자를 사용합니다. 하지만, 이를 무시하고 다른 탭을 활성화하고 콘텐츠를 나타나게 하려면 자바스크립트를 사용합니다. 아래와 같이 여러가지 선택자를 사용할 수 있습니다.

$(“#myTab a[href=’#profile’]”).tab(“show“);  // a 태그의 href=”#profile” 속성이 있는 탭
$(“#myTab a:first”).tab(“show“);          // 첫번째 탭
$(“#myTab a:last”).tab(“show“);          // 마지막 탭
$(“#myTab li:eq(2) a”).tab(“show“);   // 3번째 탭

 

탭 목록의 a 태그에는 href 또는 data-target 속성을 사용할 수 있습니다. 다만, data-target을 사용하면 마우스를 오버했을 때 커서가 손모양으로 나타나지 않으므로 스타일시트에서 cursor 속성을 pointer로 설정(cursor:pointer;)해야 합니다.

 

이벤트는 4가지가 있으며 다음과 같은 형태로 사용합니다. e.target은 활성화되는 탭을 가리키고 e.relatedTarget은 이전에 활성화 된 탭을 가리킵니다. A 탭이 활성된 상태에서 B탭을 클릭하면 A 탭이 e.relatedTarget이 되고 B 탭이 e.target이 됩니다.

$(“a[data-toggle=’tab’]”).on(“show.bs.tab”, function(e) {
e.target   // newly activated tab
e.relatedTarget  // previous active tab
});

 

.show.bs.tab : 클릭한 탭이 보이기 전에 실행합니다.
.shown.bs.tab : 클릭한 탭이 보인 후에 실행됩니다. 위와 시간적으로 거의 차이가 없습니다.
.hide.bs.tab : 이전의 탭이 감춰지기 전에 실행됩니다.
.hidden.bs.tab : 이전의 탭이 감춰진 후에 실행됩니다.