タブの作成 jQuery-プログラミング学習-月曜

a、b、cのタブを作成し、クリックしたタブの内容を表示するためコードを作成します。

  if(selector==='tab-menu-a'){
    $('.tabs-menu div #${selecor}`).addClass('active');
    $('#tabs-a').show();
  }else if(selector==='tab-menu-b'){
    $(`.tabs-menu div #${selector}`.addClass('active');
    $('#tabs-b').show();
  }else if(selector==='tab-menu-c'){
    $(`.tabs-menu div #${selector}`).addClass('active');
    $('#tabs-c').show();
  }
};

２行目、５行目、７行目は同じコードになってしまっているため、これらを削除し、冒頭に次のコードを追加してもタブを作成できます。

$(`#${selector}`).addClass('active');

上で利用したselectorという変数には、以下のように、クリックしたタブのid属性の値が代入されています。

$('.tabs-menu div').on('click',(e)=>{
  const seletor=$(e.target).attr('id');
  showTab(selector);
});

selectorは変数で定義したため、テンプレート文字列で`${selector}`で変数を埋め込んでいます。

実際はhtml上で確認すると分かりやすいですが、id属性の値がselector変数のため、`#${selector}`とし、さらにjQueryの操作をするため、$で囲んでいます。

以上がクリックしたタブに応じてタブの内容を表示させるものです。

クリックしたタブにアクティブクラスを追加しているのは、クリックしたタブの色を変えるといえます。

この色の変化は別途cssで設定をしています。

勉強の進捗のバロメーターとして、曜日の影響は少なからずあるはずです。

月曜日のイメージ

マイナス面→週末と異なり、どこかしらで騒がしい職場に順応しきれない。

同じ職場だった人との出会いなど、ふとしたことは週初めならでは新鮮味がある。

勉強の体力的な余力は比較的大きい。