English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
탭(Tab)은 Bootstrap nawigacja element 책에서 소개된 것처럼, 몇 가지 data 속성을 조합하여 탭 인터페이스를 쉽게 생성할 수 있습니다. 이 플러그인을 사용하면 내용을 탭이나胶囊 탭, 또는 드롭다운 메뉴 탭에 배치할 수 있습니다.
플러그인의 기능을 단독으로 참조하고 싶다면, 다음을 참조해야 합니다. tab.js또는, 그리고 Bootstrap 플러그인 개요 책의 한 장에서 언급된 것처럼, 다음을 참조할 수 있습니다. bootstrap.js 또는 압축된 bootstrap.min.js。
탭을 활성화할 수 있는 두 가지 방법으로는 다음과 같습니다:
data 속성을 통해추가해야 할 것은 data-toggle="tab" 또는 data-toggle="pill" 앵커 텍스트 링크에 추가하세요.
추가 nav 과 nav-tabs 클래스가 적용됩니다. ul 에서, Bootstrap에 의해 탭 스타일에 추가 nav 과 nav-pills 클래스가 적용됩니다. ul 에서, Bootstrap에 의해 胶囊형 스타일。
<ul> <li><a href="#identifier" data-toggle="tab">Home</a></li> ... </ul>
JavaScript를 통해：JavaScript를 사용하여 탭을 활성화할 수 있습니다. 예를 들어:
$('#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');탭에 투명도 조절 효과를 설정하려면 추가하세요 .fade 를 각 탭에 추가해야 합니다 .tab-pane 뒤에. 첫 번째 탭은 반드시 .in 클래스를 추가하여 초기 내용을 투명도 조절하여 표시할 수 있습니다. 예제와 같이：
<div> <div id="home">.../div> <div id="svn">.../div> <div id="ios">.../div> <div id="java">.../div> </div>
아래의 예제는 data 속성을 사용하는 탭(Tab) 플러그인 및 투명도 조절 효과를 설명합니다：
!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 예제 - 탭(Tab) 플러그인</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <ul id="myTab" class="nav nav-tabs"> <li class="active"> <a href="#home" data-toggle="tab"> 기본 튜토리얼 웹 </a> </li> <li><a href="#ios" data-toggle="tab">iOS</a></li> <li class="dropdown"> <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Java <b class="caret"></b> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1"> li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li> <li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li> </ul> </li> </ul> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade in active" id="home"> <p>기본 튜토리얼 웹사이트는 최신 웹 기술을 제공하는 웹사이트로, 이 사이트는 웹 사이트 구축과 관련된 기술 문서를 무료로 제공하여 웹 기술 애호가들이 빠르게 시작하고 자신의 웹 사이트를 구축할 수 있도록 도와줍니다. 초보자가 먼저 날아다니면 더 멀리 가실 수 있습니다. 기본을 잘 배우면 더 멀리 가실 수 있습니다./p> </div> <div class="tab-pane fade" id="ios"> <p>iOS는 애플이 개발하고 배포한 모바일 운영 체제입니다. 원래는 2007 년에 처음으로 iPhone, iPod Touch, Apple TV. iOS는 OS X에서 파생되었으며, 두 가지는 Darwin 기본을 공유합니다. OS X 운영 체제는 애플 컴퓨터에 사용되며, iOS는 애플의 모바일 버전입니다./p> </div> <div class="tab-pane fade" id="jmeter"> <p>jMeter는 오픈 소스 테스트 소프트웨어입니다. 이는 100% 순수 Java 애플리케이션으로, 로드와 성능 테스트에 사용됩니다.</p> </div> <div class="tab-pane fade" id="ejb"> <p>Enterprise Java Beans(EJB)는 고도로 확장 가능하고 강력한企业용 애플리케이션을 개발하기 위한 개발 아키텍처로, JBOSS, Web Logic과 같은 호환된 애플리케이션 서버에 배포됩니다.2EE에 있습니다. </p> </div> </div> </body> </html>테스트를 보세요.‹/›
결과는 다음과 같습니다:
$().tab：이 메서드는 탭 요소와 내용 컨테이너를 활성화할 수 있습니다. 탭은 data-target 또는 DOM 내의 컨테이너 요소를 가리키는 href。
<ul id="myTab">
<li><a href="#identifier" data-toggle="tab">Home</a></li>
.....
</ul>
<div>
<div id="home">.../div>
.....
</div>
<script>
$(function () {
$('#myTab a:last').tab('show')
)
</script>아래의 예제는 탭(Tab) 플러그인 메서드를 설명합니다 .tab 의 사용법입니다. 이 예제에서는 두 번째 탭 iOS 는 활성화된 상태입니다：
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 예제 - 탭(Tab) 플러그인 메서드</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<ul id="myTab" class="nav nav-tabs">
<li class="active">
<a href="#home" data-toggle="tab">기본 튜토리얼 웹</a>
</li>
<li><a href="#ios" data-toggle="tab">iOS</a></li>
<li class="dropdown">
<a href="#" id="myTabDrop1" class="dropdown-toggle"
data-toggle="dropdown">Java <b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
li><a href="#jmeter" tabindex="-1" data-toggle="tab">
jmeter</a>
</li>
<li><a href="#ejb" tabindex="-1" data-toggle="tab">
ejb</a>
</li>
</ul>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="home">
<p>기본 튜토리얼 웹사이트는 최신 웹 기술을 제공하는 웹사이트로, 이 사이트는 웹 사이트 구축과 관련된 기술 문서를 무료로 제공하여 웹 기술 애호가들이 빠르게 시작하고 자신의 웹 사이트를 구축할 수 있도록 도와줍니다. 초보자가 먼저 날아다니면 더 멀리 가실 수 있습니다. 기본을 잘 배우면 더 멀리 가실 수 있습니다./p>
</div>
<div class="tab-pane fade" id="ios">
<p>iOS는 애플이 개발하고 배포한 모바일 운영 체제입니다. 원래는 2007 년에 처음으로 iPhone, iPod Touch, Apple
TV. iOS는 OS X에서 파생되었으며, 두 가지는 Darwin 기본을 공유합니다. OS X 운영 체제는 애플 컴퓨터에 사용되며, iOS는 애플의 모바일 버전입니다./p>
</div>
<div class="tab-pane fade" id="jmeter">
<p>jMeter는 오픈 소스 테스트 소프트웨어입니다. 이는 100% 순수 Java 애플리케이션으로, 로드와 성능 테스트에 사용됩니다.</p>
</div>
<div class="tab-pane fade" id="ejb">
<p>Enterprise Java Beans(EJB)는 고도로 확장 가능하고 강력한企业용 애플리케이션을 개발하기 위한 개발 아키텍처로, JBOSS, Web Logic과 같은 호환된 애플리케이션 서버에 배포됩니다.2EE에 있습니다.
</p>
</div>
</div>
<script>
$(function () {
$('#myTab li:eq(1) a').tab('show');
});
</script>
</body>
</html>테스트를 보세요.‹/›결과는 다음과 같습니다:
표는 탭(Tab) 플러그인에서 사용할 이벤트를 나열했습니다. 이 이벤트는 함수에서 훅으로 사용할 수 있습니다.
| 이벤트 | 설명 | 예제 |
|---|---|---|
| show.bs.tab | 이 이벤트는 탭이 표시될 때 발생하지만, 새 탭이 표시되기 전에 발생해야 합니다. 각각의 event.target 과 event.relatedTarget 활성화된 탭과 이전으로 활성화된 탭을 정의합니다. | $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
e.target // 활성화된 탭
e.relatedTarget // 이전으로 활성화된 탭
) |
| shown.bs.tab | 이 이벤트는 탭이 표시될 때 발생하지만, 이미 표시된 탭이 있어야 합니다. 각각의 event.target 과 event.relatedTarget 활성화된 탭과 이전으로 활성화된 탭을 정의합니다. | $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
e.target // 활성화된 탭
e.relatedTarget // 이전으로 활성화된 탭
) |
아래의 예제는 탭(Tab) 플러그인 이벤트의 사용법을 보여줍니다. 이 예제에서는 현재와 이전에 방문한 탭을 표시합니다：
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 예제 - 탭(Tab) 플러그인 이벤트</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<hr>
<p class="active-tab"><strong>활성화된 탭</strong>：<span></span></p>
<p class="previous-tab"><strong>이전으로 활성화된 탭</strong>：<span></span></p>
<hr>
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">
기본 가이드 웹</a></li>
<li><a href="#ios" data-toggle="tab">iOS</a></li>
<li class="dropdown">
<a href="#" id="myTabDrop1" class="dropdown-toggle"
data-toggle="dropdown">
Java <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>
<li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li>
</ul>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="home">
<p>기본 튜토리얼 웹사이트는 최신 웹 기술을 제공하는 웹사이트로, 이 사이트는 웹 사이트 구축과 관련된 기술 문서를 무료로 제공하여 웹 기술 애호가들이 빠르게 시작하고 자신의 웹 사이트를 구축할 수 있도록 도와줍니다. 초보자가 먼저 날아다니면 더 멀리 가실 수 있습니다. 기본을 잘 배우면 더 멀리 가실 수 있습니다./p>
</div>
<div class="tab-pane fade" id="ios">
<p>iOS는 애플이 개발하고 배포한 모바일 운영 체제입니다. 원래는 2007 년에 처음으로 iPhone, iPod Touch, Apple
TV. iOS는 OS X에서 파생되었으며, 두 가지는 Darwin 기본을 공유합니다. OS X 운영 체제는 애플 컴퓨터에 사용되며, iOS는 애플의 모바일 버전입니다./p>
</div>
<div class="tab-pane fade" id="jmeter">
<p>jMeter는 오픈 소스 테스트 소프트웨어입니다. 이는 100% 순수 Java 애플리케이션으로, 로드와 성능 테스트에 사용됩니다.</p>
</div>
<div class="tab-pane fade" id="ejb">
<p>Enterprise Java Beans(EJB)는 고도로 확장 가능하고 강력한企业용 애플리케이션을 개발하기 위한 개발 아키텍처로, JBOSS, Web Logic과 같은 호환된 애플리케이션 서버에 배포됩니다.2EE에 있습니다.
</p>
</div>
</div>
<script>
$(function(){
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
// 현재 활성화된 탭의 이름을 가져옵니다
var activeTab = $(e.target).text();
// 이전으로 활성화된 탭의 이름을 가져옵니다
var previousTab = $(e.relatedTarget).text();
$(".active-tab span").html(activeTab);
$(".previous-tab span").html(previousTab);
});
});
</script>
</body>
</html>테스트를 보세요.‹/›결과는 다음과 같습니다: