부트스트랩 꼭 배워야 할 탭 페이지(Tab) 플러그인 매일_javascript 스킬

탭 일부 데이터 속성을 결합하여 탭 인터페이스를 쉽게 만들 수 있습니다.

"플러그인 기능만 참조하려면 tab.js를 참조해야 합니다. 또는 Bootstrap 플러그인 개요 장에서 언급한 대로 bootstrap.js 또는 zip 버전의 bootstrap.min.js "

1. 사용법
두 가지 방법으로 탭을 활성화할 수 있습니다.

데이터 속성을 통해: 앵커 텍스트 링크에 ​​data-toggle="tab" 또는 data-toggle="pill"을 추가해야 합니다.

ul에 nav 및 nav-tabs 클래스를 추가하면 Bootstrap 태그 스타일이 적용됩니다. ul에 nav 및 nav-pills 클래스를 추가하면 Bootstrap 캡슐 스타일이 적용됩니다.

<ul class="nav nav-tabs">
  <li><a href="#identifier" data-toggle="tab">Home</a></li>
...
</ul>

JavaScript를 통해: Javscript를 사용하여 다음과 같이 탭을 활성화할 수 있습니다.

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

다음 예에서는 개별 탭을 활성화하는 다양한 방법을 보여줍니다.

// 通过名称选取标签页
$('#myTab a[href="#profile"]').tab('show')
 
// 选取第一个标签页
$('#myTab a:first').tab('show') 
 
// 选取最后一个标签页
$('#myTab a:last').tab('show') 
 
// 选取第三个标签页（从 0 开始索引）
$('#myTab li:eq(2) a').tab('show')

2. 페이드 인 및 페이드 아웃 효과
탭 페이지에 페이드 효과를 설정해야 하는 경우 각 .tab-pane 뒤에 .fade를 추가하세요. 아래 예와 같이 페이드 인하고 초기 콘텐츠를 표시하려면 첫 번째 탭에 .in 클래스를 추가해야 합니다.

<div class="tab-content">
 <div class="tab-pane fade in active" id="home">...</div>
 <div class="tab-pane fade" id="svn">...</div>
 <div class="tab-pane fade" id="ios">...</div>
 <div class="tab-pane fade" id="java">...</div>
</div>

3. 방법
.$().tab: 이 방법은 탭 요소와 콘텐츠 컨테이너를 활성화합니다. 탭은 DOM의 컨테이너 노드를 가리키는 data-target 또는 href를 사용해야 합니다.

<ul class="nav nav-tabs" id="myTab">
 <li class="active"><a href="#identifier" data-toggle="tab">Home</a></li>
 .....
</ul>
<div class="tab-content">
 <div class="tab-pane active" id="home">...</div>
 .....
</div>
<script>
 $(function () {
  $('#myTab a:last').tab('show')
 })
</script>

4. 이벤트
다음 표에는 탭 플러그인에서 사용되는 이벤트가 나열되어 있습니다. 이러한 이벤트는 함수의 후크로 사용될 수 있습니다.

5. 기본 예시
1． 태그 페이지
탭 페이지는 일반적으로 탭 기능으로도 알려져 있습니다.

//基本用法
<ul class="nav nav-tabs">
  <li class="active">
    <a href="#html5"
    data-toggle="tab">HTML5</a>
  </li>
  <li>
    <a href="#bootstrap" data-toggle="tab">Bootstrap</a>
  </li>
  <li>
    <a href="#jquery" data-toggle="tab">jQuery</a>
  </li>
  <li>
    <a href="#extjs" data-toggle="tab">ExtJS</a>
  </li>
</ul>

<div class="tab-content" style="padding: 10px;">
  <div class="tab-pane active" id="html5">
    ...
  </div>
  <div class="tab-pane" id="bootstrap">
    ...
  </div>
  <div class="tab-pane" id="jquery">
    ...
  </div>
  <div class="tab-pane" id="extjs">
    ...
  </div>
</div>

//可以设置淡入淡出效果 fade，而 in 表示首选的内容默认显示

<div class="tab-pane fade in active" id="html5">
//也可以换成胶囊式

<ul class="nav nav-pills">
//data-target

data-target을 사용해 바인딩해도 효과는 같습니다

//使用 JavaScript，直接使用 tab 方法。

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

//事件，其他雷同

$('#nav a').on('show.bs.tab', function() {
  alert('调用 tab 时触发！');
});

$('#nav a').on('shown.bs.tab', function() {
  alert('显示完 tab 时触发！');
}); 

더 많은 콘텐츠를 보려면 Bootstrap 주제를 주목하세요: Bootstrap 학습 튜토리얼

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.