April 6, 2018

BasicTabsはタブを実装するための柔軟で軽量なスクリプトです。

javascriptファイルをページに追加します。

<script src="js/basicTabs-min.js"></script>

$(document).ready(function(){
  $('.c-tabs').basicTabs();
});

$('.c-tabs').basicTabs({
  active_class: "current",
  list_class: "tabs",
  open_class: "is-open"
  starting_tab: 1
});

<ul class="c-tabs">
  <li class="c-tabs__item">
    <a href="javascript:void(0)">Tab 1</a>
    <div class="c-tabs__content">
      <p>Content goes here.</p>
    </div>
  </li>
  <li class="c-tabs__item">
    <a href="javascript:void(0)">Tab 2</a>
    <div class="c-tabs__content">
      <p>Content goes here.</p>
    </div>
  </li>
  <li class="c-tabs__item">
    <a href="javascript:void(0)">Tab 3</a>
    <div class="c-tabs__content">
      <p>Content goes here.</p>
    </div>
  </li>
</ul>