jQueryでif文を使ったタブの表示をさせたい

現在、jQueryでタブを作っており
if文を取り入れたタブの作成ができておらず
タブをクリックしても要素を表示することができません。

発生している問題・エラーメッセージ

タブの表示・タブの切り替え

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="utf-8">
6  <title>JavaScript Test</title>
7  <link rel="stylesheet" href="main.css">
8</head>
9
10<body>
11  <div class="tabs-menu">
12    <div id="tab-menu-a">タブa</div>
13    <div id="tab-menu-b">タブb</div>
14    <div id="tab-menu-c">タブc</div>
15  </div>
16  <div class="tabs-content">
17    <div id="tabs-a">
18      <p>タブaの内容が入ります。</p>
19    </div>
20    <div id="tabs-b">
21      <p>タブbの内容が入ります。</p>
22    </div>
23    <div id="tabs-c">
24      <p>タブcの内容が入ります。</p>
25    </div>
26  </div>
27  <!-- jQuery -->
28  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
29  <script src="main.js"></script>
30</body>
31
32</html>

CSS
1body {
2    color: #3F4548;
3}
4
5 /* ulのデフォルトスタイルを消去 */
6.tabs-menu {
7    margin: 0;
8    padding: 0;
9    list-style-type: none;
10}
11
12 /* タブの基本スタイル */
13#tab-menu-a,#tab-menu-b,#tab-menu-c {
14    float: left;
15    margin-right: 8px;
16    margin-bottom: -1px;
17    border-style: solid;
18    border-width: 1px;
19    border-color: transparent;
20    border-radius: 4px 4px 0 0;
21    
22 /* 各プロパティをふわっと変える演出 */ 
23    transition: all .15s;
24
25    display: block;
26    padding: 10px 20px;
27    color: #557F95;
28    text-decoration: none;
29}
30
31
32 /* 非選択のタブにマウスを乗せたら色を変える */
33.tabs-menu :not(.active):hover {
34    border-color: #f0f0f0 #f0f0f0 #999;
35    background-color: #f0f0f0;
36}
37
38 /* 選択中のタブ */
39.tabs-menu .active {
40    border-color: #999 #999 transparent #999;
41    background-color: #fff;
42}
43.tabs-menu .active {
44    color: #3F4548;
45}
46/* タブコンテンツ表示エリア */
47.tabs-content {
48    clear: both;/* ズレた物を直す */
49    border: 1px solid #999;/* タブ下のコンテンツを囲む */
50    border-radius: 0 4px 4px 4px;/* タブの囲みの角を丸くする */
51    padding: 10px;
52}
53
54/* 角タブのコンテンツはデフォルトで非表示 */
55.tabs-content {
56    display: none;
57}
58

jQuery
1/**
2 * selectorに該当するタブを表示する
3 * console.logをした時にtab-menu-aが出ないといけない
4 */
5 
6const showTab = (selector) => {
7  //因数selectorの中身をコンソールで確認する
8  console.log(selector);
9  
10  //一度全てのタブa,b,cからactiveクラスを削除する
11  $(".tabs-menu div").removeClass("active");
12  //タブのうち、selectorに該当するものだけにactiveクラスを付ける
13  $("div[id="+`${selector}`+"]").addClass('active');
14
15 
16  //一度全てのタブの内容を非表示にする
17  $(".tabs-content > div").hide();
18  let tabContentId = ''
19  if(selector === 'tab-menu-a') {
20      tabContentId = 'tabs-a'
21  } else if(selector === 'tab-menu-b') {
22  	 tabContentId = 'tabs-b'
23  } else {
24  	 tabContentId = 'tabs-c'
25  }
26
27  $('#' + tabContentId).show()
28  //.tabs-content > tabs-のうち、selectorに該当するものだけを表す
29  $(selector).show();
30};
31
32// タブがクリックされたらコンテンツを表示
33$('.tabs-menu div').on('click', (e) => {
34  // hrefへのページ遷移とを止める
35  e.preventDefault();
36  // hrefの値を受け取った後、showTab()関数に渡す。e.targetはクリックされたタブ（.tabs-menu a）を表す
37  const selctor = $(e.target).attr('id');
38
39});
40
41// 初期状態として1番目のタブを表示
42showTab('tab-menu-a');

行動規範の内容に同意します

回答1件

ベストアンサー

$(".tabs-content > div").hide();で非表示にするのだから以下は必要ないです。
これでとりあえず見えるようにはなります。

css
1.tabs-content {
2    display: none; /* 削除 */
3}

タブをクリックしたのにshowTab()に渡していない。

JS
1// タブがクリックされたらコンテンツを表示
2$('.tabs-menu div').on('click', (e) => {
3  // hrefへのページ遷移とを止める
4  e.preventDefault();
5  // hrefの値を受け取った後、showTab()関数に渡す。e.targetはクリックされたタブ（.tabs-menu a）を表す
6  const selctor = $(e.target).attr('id');
7
8  showTab(selctor); /* 追加 */
9});