Bootstrap Tab 사용

1. Page에 bootstrap-tab.js 링크 추가

http://twitter.github.com/bootstrap/assets/js/bootstrap-tab.js

2. Tab을 사용하기 위한 html 작성

<!-- Tab Title -->
<ul id="myTab" class="nav nav-tabs">
    <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
    <li><a href="#profile" data-toggle="tab">Profile</a></li>
</ul>
<!-- Tab Contents -->
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="home">
        <p>First Tab</p>
    </div>
    <div class="tab-pane fade" id="profile">
        <p>Second Tab</p>
    </div>
</div>

3. 작성한 html과 tab event을 연결하는 javascript 함수 작성

$('#myTab a').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
})

[참고] Bootstrap Tabs