bootstrap tab과 pill을 data 속성으로 동작시키기

bootstrap navs는 크게 두 부분으로 나뉘어진다. 메뉴를 보여주는 .nav와 각 메뉴의 내용인 .tab-pane을 품고있는 .tab-content로 나뉘어진다. 각 메뉴를 클릭하면 해당 메뉴는 target하고 있는 .tab-pane을 보여주고 다른 .tab-pane은 감춘다. 간단한 소스로 보여주면 아래와 같다.

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a data-toggle="pill" data-target="#first">1번 필</a></li>
  <li role="presentation"><a data-toggle="pill" data-target="#second">2번 필</a></li>
  <li role="presentation"><a data-toggle="pill" data-target="#third">3번 필</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="first">
    1번 필
  </div>
  <div class="tab-pane" id="second">
    2번 필
  </div>
  <div class="tab-pane" id="third">
    3번 필
  </div>
</div>

data-target은 id 셀렉터든 클래스 셀렉터든 상관 없으며, 여러개를 target할 수 있다. 또한 data-target속성 대신 href속성으로도 target할 수 있다. 하지만 bootstrap 가이드에서는 href와 data-target속성을 같이 지정했는데, 아마도 data속성을 지원하지 않는 몇몇 브라우저를 대비한 것이 아닌가 추측된다.

related links

Written on August 11, 2016