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>