JS Tab (tab.js)
탭은 각 창은 한 번에 볼 일이 어디 다른 창으로 내용을 구분하는 데 사용됩니다.
탭에 대한 자습서를 들어, 우리의 읽기 Bootstrap Tabs/Pills 자습서 .
탭 플러그인 클래스
| 수업 | 기술 | 예 |
|---|---|---|
| .nav nav-tabs | 탐색 탭을 만듭니다 | 시도 해봐 |
| .nav-justified | 네비게이션 만든다 tabs/pills 넓은 768px 이상의 화면에서 부모의 동일한 폭을. 작은 화면에서 탐색 탭은 적층 | 시도 해봐 |
| .tab-content | 함께 .tab-pane 및 data-toggle="tab" , 그것은 탭 toggable한다 | 시도 해봐 |
| .tab-pane | 함께 .tab-content 및 data-toggle="tab" , 그것은 탭 toggable한다 | 시도 해봐 |
통해 data-* 속성
추가 data-toggle="tab" 각 탭에, 그리고 추가 .tab-pane 각 탭에 대한 고유 ID와 클래스를하고 그들을 감싸 .tab-content 클래스입니다.
예
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab"
href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu
1</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in
active">
<h3>HOME</h3>
<p>Some
content.</p>
</div>
<div id="menu1" class="tab-pane
fade">
<h3>Menu 1</h3>
<p>Some
content in menu 1.</p>
</div>
</div>
»그것을 자신을 시도 자바 스크립트를 통해
수동으로 사용 :
예
// Select all tabs
$('.nav-tabs a').click(function(){
$(this).tab('show');
})
// Select tab by name
$('.nav-tabs a[href="#home"]').tab('show')
// Select first tab
$('.nav-tabs a:first').tab('show')
// Select
last tab
$('.nav-tabs a:last').tab('show')
// Select fourth tab
(zero-based)
$('.nav-tabs li:eq(3) a').tab('show')
»그것을 자신을 시도 탭 옵션
| None |
탭 방법
다음 표는 사용 가능한 모든 탭 방법을 보여줍니다.
| 방법 | 기술 | 시도 해봐 |
|---|---|---|
| .tab("show") | 탭을 표시합니다 | 시도 해봐 |
탭 이벤트
다음 표는 사용 가능한 모든 탭 이벤트를 보여줍니다.
| 행사 | 기술 | 시도 해봐 |
|---|---|---|
| show.bs.tab | 탭이 표시하려고 할 때 발생합니다. | 시도 해봐 |
| shown.bs.tab | 탭이 완전히 표시 될 때 발생합니다 (CSS 전환을 완료 한 후) | 시도 해봐 |
| hide.bs.tab | 탭이 숨겨져하려고 할 때 발생합니다 | 시도 해봐 |
| hidden.bs.tab | 탭이 완전히 숨겨져 때 발생합니다 (CSS 전환을 완료 한 후) | 시도 해봐 |
팁 : jQuery의 사용 event.target 및 event.relatedTarget 활성 탭 이전 활성 탭을 얻을 수 :
예
$('.nav-tabs a').on('shown.bs.tab', function(event){
var x = $(event.target).text();
// active tab
var y = $(event.relatedTarget).text();
// previous tab
}); »그것을 자신을 시도