$(function () {
  // 先頭のパネル以外非表示にしておく
  $('.js-tabBody > div:not(:eq(0))').hide();

  // 先頭のナビに「is-active」を付けておく
  $('.js-tabNav li:first-child a').addClass('is-active');

  $('.js-tabNav a').click(function () {

    // 一度全てのパネル非表示
    $('.js-tabBody > div').hide();

    // イベントを発生した要素の href属性を取得し、フェードで表示
    var target = $(this).attr('href');
    $(target).fadeIn(500);

    // 「is-active」クラスを外し、イベントが発生した要素に付ける
    $('.js-tabNav .is-active').removeClass('is-active');
    $(this).addClass('is-active');
  });
});
