부트스트랩 7장 - 탭기능을 적용하여 내용의 가독성 높이기

이번에는 부트스트랩의 탭화면을 구현 하여  컨텐츠 내용의 가독성을 높여보도록 하겠습니다.

탭기능을 동작시키는 방법으로는 스크롤 스파이와 동일하게 

HTML 태그의 속성값을 추가하는 방법과 JQUERY를 이용한 방법 이렇게 2가지 예를 들도록 하겠습니다.

HTML로 구현되는 탭화면 + 기능코드

<nav class="navbar navbar-default navbar-fixed-top">
        <div>
          <ul class="nav navbar-nav nav-tabs">
			  <li class="active"><a href="#first" >탭화면 첫번째</a></li>
			  <li><a href="#second" >탭화면 두번째</a></li>
			  <li><a href="#third" >탭화면 마지막</a></li>
          </ul>
        </div>
</nav>
<div class="tab-content" style="margin-top: 80px;">
  <div class="tab-pane fade active in" id="first">
    <p>
    	첫번째 탭포커스가 위치할 내용입니다.<br/>
    	id="first인대 상단 네비게이션의 href속성값인 #아이디"명과 일치하는 패널이랑 맵핑을 시켜줍니다.
    </p>
  </div>
  <div class="tab-pane fade" id="second">
    <p>
    	두번째 탭포커스 위치할 내용입니다.<br/>
    	data-togge="tab"을 지정해주셔야 탭버튼으로 인식을 합니다.
    </p>
  </div>
  <div class="tab-pane fade" id="third">
    <p>
    	마지막 세번째 탭클릭시 보여지는 컨텐츠 내용입니다.
    </p>
  </div>
</div>

탭화면을 구현하기 위한 방법은

1. 네비게이션바의 탭토글을 적용하고자 할 태그에  data-toggle="tab" 라는 속성을 추가해줍니다.

2. 네비게이션바의 a태그의 href값과 각 탭패널에대한 id값을 맵핑시켜주어야 합니다.

3. tab-pane 클래스로 정의된 그룹들을 tab-content 클래스로 부모태그로 감싸주셔야 합니다.

4. 최초 로딩후 포커스를 주고자 하는 tab-pane div 영역에 active클래스와 in 클래스를 적용해줍니다.

스크립트로 탭기능 구현을 위해서는 다음 jQuery 코드를 작성해주시면 되겠습니다.

jQuery를 이용한 탭기능 구현코드

$(function(){
	$('ul.nav-tabs a').click(function (e) {
	  e.preventDefault()
	  $(this).tab('show')
	})
})

jQuery코드를 적용하실경우 data-toggle="tab" 속성들을 

삭제 후 스크립트 코드를 적용해주시면 되겠습니다.

실행결과는 모두 동일하게 나옵니다

부트스트랩을 이용한 탭화면 실행 결과

부트스트랩을 이용하면 참 심플하게 화면이 구현되지 정말 매력적입니다 ^^ ㅋ

by 개발로짜