Bootstrap タブ



タブ1の内容
タブ1の内容
タブ1の内容
タブ2の内容
タブ2の内容
タブ2の内容
タブ3の内容
タブ3の内容
タブ3の内容
タブ4の内容
タブ4の内容
タブ4の内容



<!–HTML]–>
<ul class="nav nav-tabs nav-justified js-Tab">
  <li class="active"><a href="#tab1">タブ1</a></li>
  <li><a href="#tab2" data-toggle="tab">タブ2</a></li>
  <li><a href="#tab3" data-toggle="tab">タブ3</a></li>
  <li><a href="#tab4" data-toggle="tab">タブ4</a></li>
</ul>
<div class="tab-content m-bottom" style="background: #FFF; padding: 1.5em 1em;">
  <div class="tab-pane active" id="tab1">
    タブ1の内容
    タブ1の内容
    タブ1の内容
  </div>
  <div class="tab-pane" id="tab2">
    タブ2の内容
    タブ2の内容
    タブ2の内容
  </div>
  <div class="tab-pane" id="tab3">
    タブ3の内容
    タブ3の内容
    タブ3の内容
  </div>
  <div class="tab-pane" id="tab4">
    タブ4の内容
    タブ4の内容
    タブ4の内容
  </div>
</div>
<!–JS–>
<script>
  $(function() {
    $('.js-Tab a').click(function(e) {
      e.preventDefault()
      $(this).tab('show')
    })
  });
</script>

1週間でできる会員サイト「Limited」

1週間でできる会員サイト「Limited」
必要最小限。だから分かりやすい。始めやすい。続けやすい。
限定① 安⼼・安全の会員制
限定② 必要最⼩限の機能
限定③ 独⾃機能を追加可能