https://toraiz.jp/assets/js/new/tab.js?d=20210514

1$(function() {
2  let tabs = $(".tab"); // tabのクラスを全て取得し、変数tabsに配列で定義
3  $(".tab").on("click", function() { // tabをクリックしたらイベント発火
4    $(".active").removeClass("active"); // activeクラスを消す
5    $(this).addClass("active"); // クリックした箇所にactiveクラスを追加
6    const index = tabs.index(this); // クリックした箇所がタブの何番目か判定し、定数indexとして定義
7    $(".contents").removeClass("show").eq(index).addClass("show"); // showクラスを消して、contentクラスのindex番目にshowクラスを追加
8  })
9})
10
11  $('select').change(function () {
12    console.log("1")
13  var val = $('select option:selected').val();
14  console.log(val)
15  // if (val == 'select') return;
16  if (val == 'select') {
17    $('section.contents').fadeOut("fast");
18    $('section.contents').fadeIn("fast");
19  }else{
20    $('section.contents').fadeOut("fast");
21    $('section#' + val ).fadeIn("fast");
22  }
23  });
24
25
26$(function() {
27  let tabs2 = $(".tab2"); // tabのクラスを全て取得し、変数tabsに配列で定義
28  $(".tab2").on("click", function() { // tabをクリックしたらイベント発火
29    $(".active2").removeClass("active2"); // activeクラスを消す
30    $(this).addClass("active2"); // クリックした箇所にactiveクラスを追加
31    const index2 = tabs2.index(this); // クリックした箇所がタブの何番目か判定し、定数indexとして定義
32    $(".contents2").removeClass("show2").eq(index2).addClass("show2"); // showクラスを消して、contentクラスのindex番目にshowクラスを追加
33  })
34})
35
36  $('select').change(function () {
37    console.log("1")
38  var val = $('select option:selected').val();
39  console.log(val)
40  // if (val == 'select') return;
41  if (val == 'select') {
42    $('section.contents2').fadeOut("fast");
43    $('section.contents2').fadeIn("fast");
44  }else{
45    $('section.contents2').fadeOut("fast");
46    $('section#' + val ).fadeIn("fast");
47  }
48  });
49