boottstrap 소스 코드 학습 및 예제: boottstrap - tab

카드 를 전환 하거나 탭 구성 요소 라 고 합 니 다.이것 은 scrollspy 구성 요소 와 마찬가지 로 두 부분 으로 나 뉘 며, 트리거 구역 과 패 널 구역 으로 나 뉜 다.트리거 구역 은 클릭 이 벤트 를 연결 하고 해당 하 는 패 널 을 전환 하 는 데 사 용 됩 니 다.
UL 목록 으로 전환 합 니 다. UL 에 'nav nav - tabs' 나' nav nav - pills' 라 는 두 가지 유형 을 가 져 오 라 고 요구 합 니 다.li 아래 탭 은 data - toggle = "tab" 속성 을 요구 합 니 다. data - target 또는 href 를 통 해 해당 하 는 패 널 을 지정 할 수 있 습 니 다.
 
패 널 구역 은 상대 적 으로 여유 가 있어 야 합 니 다. 용 기 는 'tab - content' 라 는 이름 을 가 져 야 합 니 다. 아래 의 모든 패 널 은 'tab - pane' 라 는 이름 을 가 져 야 합 니 다.
? < ul   id = "mytab"   class = "nav nav-tabs" >      < li   class = "active" >< a   href = "#home"   data-toggle = "tab" > </ a ></ li >      < li >< a   href = "#profile"   data-toggle = "tab" > </ a ></ li >      < li >< a   href = "#messages"   data-toggle = "tab" > </ a ></ li >      < li >< a   href = "#settings"   data-toggle = "tab" > </ a ></ li > </ ul >
  < div   class = "tab-content" >      < div   class = "tab-pane active"   id = "home" >111</ div >      < div   class = "tab-pane"   id = "profile" >2222</ div >      < div   class = "tab-pane"   id = "messages" >333</ div >      < div   class = "tab-pane"   id = "settings" >444.</ div > </ div >
JS 를 직접 도입 하면 사용 할 수 있 지만, 탭 의 LI 요소 에 'active' 클래스 를 지정 해 야 합 니 다.
JS 로 어떤 패 널 이 활성화 되 었 는 지 명확 하 게 지정 하려 면 용기 에 사용 되 는 것 이 아니 라 탭 페이지 의 링크 에 tab ("show") 방법 을 사용 해 야 합 니 다.이것 은 다른 jQuery 플러그 인과 약간 다르다.
? $( function   () {   $( '.nav-tabs a:last' ).tab( 'show' ) })
View Code
 
< html > < head > < title > bootstrap 학습 by 사도 정미 < / title > < meta http - equiv = "Content - type" content = "text / html; charset = utf - 8" >

$(function () { var log = function(s){ window.console && console.log(s) } $('.nav-tabs a:last').tab('show') $('a[data-toggle="tab"]').on('show', function (e) { log(e) }) $('a[data-toggle="tab"]').on('shown', function (e) { log(e.target) // activated tab log(e.relatedTarget) // previous tab }) })

< li class =" active "> < a href =" \ # home "data - toggle =" tab "> 첫 페이지 < / a > < / li > < li > < a href =" \ # profile "data - toggle =" tab "> 소개 < / a > < / li > < li > < a href =" \ # messages "data - toggle =" tab "> 메시지 < / a > < / li > < li > < li > < a href =" \ # settings "data - toggle =" tab "> 설정 < / a > < / li > < ul >

111
2222
333
444.


실행 코드
navs. less 를 도입 하려 고 합 니 다.
 
 
태그: 
javascript