タブパネル

シンプルなタブパネル

コンテンツはご自由に

Contents 1

Contents 2

Contents 3

<div role="tabpanel">
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active">
      <a href="#contents1" aria-controls="contents1" role="tab" data-toggle="tab">contents1</a>
    </li>
    <li role="presentation">
      <a href="#contents2" aria-controls="contents2" role="tab" data-toggle="tab">contents2</a>
    </li>
    <li role="presentation">
      <a href="#contents3" aria-controls="contents3" role="tab" data-toggle="tab">contents3</a>
    </li>
  </ul>
  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="contents1">
      Contents 1
    </div>
    <div role="tabpanel" class="tab-pane" id="contents2">
      Contents 2
    </div>
    <div role="tabpanel" class="tab-pane" id="contents3">
      Contents 3
    </div>
  </div>
</div>

フェードエフェクトを付ける

うん、要らないかな・・海外だと割とこういうの好むのかな、またにみかけます。

Contents 4

Contents 5

Contents 6

<div role="tabpanel">
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active">
      <a href="#contents4" aria-controls="contents4 in active" role="tab" data-toggle="tab">contents4</a>
    </li>
    <li role="presentation">
      <a href="#contents5" aria-controls="contents5" role="tab" data-toggle="tab">contents5</a>
    </li>
    <li role="presentation">
      <a href="#contents6" aria-controls="contents6" role="tab" data-toggle="tab">contents6</a>
    </li>
  </ul>
  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane fade active" id="contents4">
      Contents 4
    </div>
    <div role="tabpanel" class="tab-pane fade" id="contents5">
      Contents 5
    </div>
    <div role="tabpanel" class="tab-pane fade" id="contents6">
      Contents 6
    </div>
  </div>
</div>