탭 (탭) 일부 데이터 속성을 결합하여 탭 인터페이스를 쉽게 만들 수 있습니다.
"플러그인의 기능을 개별적으로 참조하려면 tab.js. 또는 bootstrap 플러그인 개요 장에서 언급 된대로 bootstrap.js 또는 compressed 버전의 bootstrap.min.js를 참조 할 수 있습니다."
1. 사용법
두 가지 방법으로 탭 페이지를 활성화 할 수 있습니다.
데이터 속성에 따라 : Data-Toggle = "Tab"또는 Data-Toggle = "Pill"을 앵커 텍스트 링크에 추가해야합니다.
UL에 Nav 및 Nav-Tab 클래스를 추가하면 Bootstrap 태그 스타일이 적용되며 NAV 및 Nav-Pill 클래스를 UL에 추가하면 Bootstrap 캡슐 스타일이 적용됩니다.
<ul> <li> <a href = "#식별자"data-toggle = "tab"> home </a> </li> ... </ul>
JavaScript를 통해 : JavaScript를 사용하여 다음과 같이 탭을 활성화 할 수 있습니다.
$ ( '#mytab a'). 클릭 (function (e) {e.preventDefault () $ (this) .tab ( 'show')})다음 예제는 다양한 방식으로 개별 탭의 활성화를 보여줍니다.
// 탭을 선택하면 $ ( '#mytab a [href = "#profile"]'). 탭 ( 'show') // 첫 번째 탭을 선택하면 $ ( '#mytab a : first'). tab ( 'show') // 마지막 탭을 선택하십시오. $ page $ ( '#mytab a : last'). ( 'show') // 세 번째 탭 페이지를 선택하십시오 (0) $ ( '#mytab li). a '). 탭 ('show ')2. 페이드 효과
탭의 페이드 효과를 설정 해야하는 경우 각 .tab-pane에 .fade를 추가하십시오. 첫 번째 탭은 다음 예에서 볼 수 있듯이 초기 컨텐츠를 표시하려면 .in 클래스와 함께 추가되어야합니다.
<div> <div id = "home"> ... </div> <div id = "svn"> ... </div> <div id = "ios"> ... </div> <div id = "java"> ... </div> </div>
3. 방법
. $ (). 탭 :이 메소드는 탭 요소 및 컨텐츠 컨테이너를 활성화합니다. 탭 페이지는 DOM의 컨테이너 노드를 가리키는 데이터 표적 또는 HREF를 사용해야합니다.
<ul id = "mytab"> <li> <a href = "#identifier"data-toggle = "tab"> home </a> </li> ..... </ul> <div> <div id = "home"> ... </div> ....
IV. 이벤트
다음 표는 탭 (탭) 플러그인에 사용할 이벤트를 나열합니다. 이러한 이벤트는 기능의 후크로 사용될 수 있습니다.
5. 기본 예
1. 태그
탭 페이지는 일반적으로 탭 함수라고합니다.
// 기본 사용법 <ul> <li> <a href = "#html5"data-toggle = "tab"> html5 </a> </li> <li> <a href = "#bootstrap"data-toggle = "tab"> bootstrap </a> </li> <li> <jquery "#jquery"#jquery "#jquery"#jquery "#jquery </li> <li> <a href = "#extjs"data-toggle = "tab"> extjs </a> </a> </li> </ul> <div style = "padding : 10px;"> <div id = "html5"> ... </div = "bootstrap"> ... </div> <jquery "> </div> <"jquery "> </div> </div>
// 페이드 효과가 설정 될 수 있으며, 기본적으로 선호하는 컨텐츠가 기본적으로 표시됨 <div id = "html5"> // 캡슐 <ul> // data-target으로 대체 할 수도 있습니다.
바인딩 또는 바인딩 효과는 데이터 표시와 동일합니다.
// JavaScript를 사용하고 탭 메소드를 직접 사용하십시오. $ ( '#nav a'). on ( 'click', function (e) {e.preventDefault (); $ (this) .tab ( 'show');}); // 이벤트, 기타 유사성 $ ( '#nav a'). on ( 'show.bs.tab', function () {alert ( '무료 호출 탭!');}); $ ( '#nav a'). on ( 'ship.bs.tab', function () {alert ( '탭을 표시 할 때 무료 탭!');});이 일련의 튜토리얼은 다음과 같이 컴파일되었습니다. Bootstrap Basic Tutorials 특별 주제, Click to Learn에 오신 것을 환영합니다.
여전히 심도있게 공부하고 싶다면 여기를 클릭하여 3 가지 흥미로운 주제를 공부하고 첨부 할 수 있습니다.
부트 스트랩 학습 튜토리얼
부트 스트랩 실용 튜토리얼
부트 스트랩 테이블 사용 자습서
부트 스트랩 플러그인 사용 튜토리얼
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.