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

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

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

js

$(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に効かせています。

参考サイト

.eq() | jQuery 1.9 日本語リファレンス | js STUDIO

  • コーダーのための計算機