jQueryを使った　タブページの作成

前提・実現したいこと

こんにちは、私はプログラミング初心者なのですが
下記内容にてわかりません。
恐れ入りますが、回答をお願い致します。

jQueryを使用して、タブページを作成したいです。
ですがタブの中ににtabs-contentの文字が表示されません。

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

エラーメッセージ

該当のソースコード

.html
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>JavaScript Test</title>
  <link rel="stylesheet" href="main.css">
</head>

<body>
  <div class="tabs-menu">
    <div id="tab-menu-a">タブa</div>
    <div id="tab-menu-b">タブb</div>
    <div id="tab-menu-c">タブc</div>
  </div>
  <div class="tabs-content">
    <div id="tabs-a">
      <p>タブaの内容が入ります。</p>
    </div>
    <div id="tabs-b">
      <p>タブbの内容が入ります。</p>
    </div>
    <div id="tabs-c">
      <p>タブcの内容が入ります。</p>
    </div>
  </div>

  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="main.js"></script>
</body>

</html>

```ここに言語を入力
.css
body {
  color: #3F4548;
}

.tabs-menu {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.tabs-menu div {
  float: left;
  margin-right: 8px;
  margin-bottom: -1px;
  border-style: solid;
  border-width: 1px;
  border-color: transparent;
  border-radius: 4px 4px 0 0;
  transition: all .15s;
}

.tabs-menu div {
  display: block;
  padding: 10px 20px;
  color: #557F95;
  text-decoration: none;
}

.tabs-menu div:not(.active):hover {
  border-color: #f0f0f0 #f0f0f0 #999;
  background-color: #f0f0f0;
}

.tabs-menu .active {
  border-color: #999 #999 transparent #999;
  background-color: #fff;
}
.tabs-menu .active {
  color: #3F4548;
}

.tabs-content {
  clear: both;
  border: 1px solid #999;
  border-radius: 0 4px 4px 4px;
  padding: 10px;
}

.tabs-content div {
  display: none;
}

```ここに言語を入力
const showTab = (selector) => {
    console.log(selector);

    $('.tabs-menu div').removeClass('active');

    // $('div[id="tab-menu-a"]')
    $(`div[id="${selector}"]`).addClass('active');

    $('.tabs-content > div').hide();
    $(selector).show();
    
    if (selecter === "tab-menu-a") {
        $('#tabs-a').show();
    };

    if (selecter === "tab-menu-b") {
        $('#tabs-b').show();
    };

    if (selecter === "tab-menu-c") {
        $('#tabs-c').show();
    };
};


$('.tabs-menu div').on('click', (e) => {
    e.preventDefault();

    const selector = $(e.target).attr('id');
    showTab(selector);
});

showTab('tab-menu-a');

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

m.ts10806

2020/07/01 20:40

マークダウンのcode機能を利用する際は、実際のコードだけを入れてください。でないと、再現確認するときに関係「なさそうな」ところを除く手間が発生しますし、他者故に、本当にその内容があるものか・投稿時に誤って入ってしまったものか判断できません。たまにあります。要ら「なさそう」と思って削除した文言が実は実際のコードに入り込んでいて、質問者と投稿者で話がかみ合わなくなって解決まで時間を要することって。結局それが原因だったとかで。質問は編集できますので、調整してください。あと、これは覚えておいてもらいたいのですが、「全く分からない」状態で、ツギハギのコードを書くものではないと思います。 1行1行、場合により1節1節を調べながら見ていけばそこまで難解なことはやっていません（大抵のコードはそうです）自身が手におえない＝手を出す段階ではないとも言えます。まずは自身が分かっていること分かっていないこと、その範囲を明確にするところから、問題切り分けが始まります。 https://teratail.com/help/question-tips#questionTips2-1

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

回答1件

ベストアンサー

こんな感じでは？

javascript
1  $('.tabs-menu div').on('click',function(){
2    $(this).addClass('active').siblings().removeClass('active');
3    var idx=$('.tabs-menu div').index(this);
4    $('.tabs-content div').hide().eq(idx).show();
5  }).eq(0).trigger('click');