2018/03/28

レスポンシブのタブメニュー

先日公開したコーダーのための計算機で使用したタブメニューです。レスポンシブ対応。今回のメニューは５個なので、スマホサイズの時のタブサイズは、１〜３番目の横幅は33%、４番目と５番目の時は横幅50%です。

See the Pen 180327 by nekuta (@nekuta) on CodePen.

  $(function() {
    //loadされたとき一番目のタブを表示させておく
    $('.nav-list>li:first').addClass('is-open');
    $('.calc-section:first').addClass('is-open');
    $('.nav-list>li').on('click', function() {
      //クリックしたliのindex番号を出しておく 
      var nav_index = $('.nav-list>li').index(this);
      $('.nav-list>li').removeClass('is-open');
      $(this).addClass('is-open');
      //クリックしたliのindex番号でフィルタリング
      var sec_index = $('.calc-section').eq(nav_index);
      $('.calc-section').removeClass('is-open');
      sec_index.addClass('is-open');
    });
  });

nav-list>liとcalc-sectionは同じ数あるので、nav-list>liがクリックされたindex番号を取得して、calc-sectionに効かせています。