jQueryを用いて切り替えタブを作成したいです。

初心者のため、質問に関して至らない点がありましたら申し訳ございません。

前提・実現したいこと

javascript,css,htmlを用いてタブ(Chromeのタブのようにコンテンツを切り替えて表示させたい)を作成しています。
教材の例題を自分のAWSのワークスペースで同じように再現したいのですが思い通りに動作させることが出来ていません。ご教授お願い致します。

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

タブの形はできていますが、タブの切り替えをクリックして変えることができずに困っています。
デベロッパーツールのconsoleを確認すると、main1.js:6 #tabs-1　と表示されています。

該当のソースコード

index1.html

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

<head>
    <meta charset="utf-8">
    <title>jQuery テスト</title>
    <link rel="stylesheet" href="main1.css">
</head>



<body>
    <ul class="tabs-menu">
        <li><a href="#tabs-1">タブ1</a></li>
        <li><a href="#tabs-2">タブ2</a></li>
        <li><a href="#tabs-3">タブ3</a></li>
    </ul>
    <section class="tabs-content">
        <section id="tabs-1">
            <p>タブ1の内容が入ります。</p>
        </section>
        <section id="tabs-2">
            <p>タブ2の内容が入ります。</p>
        </section>
        <section id="tabs-3">
            <p>タブ3の内容が入ります。</p>
        </section>
    </section>

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

</html>

main1.css

/* ページ全体での文字色の設定 */
body {
    color: #3F4548;
}

/* ulのデフォルトスタイルを消去 */
.tabs-menu {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

/* タブの基本スタイル */
.tabs-menu li {
    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 0.15s;
}

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

/* 非選択のタブにマウスカーソルを乗せたら色を変える */
.tabs-menu li: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 a {
    color: #3f4548;
}

/* タブコンテンツ表示エリア */
.tabs-content {
    clear: both;
    border: 1px solid #999;
    border-radius: 0 4px 4px 4px;
    padding: 10px;
}

/* 各タブのコンテンツはデフォルトで非表示 */
.tabs-content section {
    display: none;
}

main1.js

/**
 * selectorに該当するタブを表示する関数
 */
const showTab = (selector) => {
    // 引数selectorの中身をコンソールで確認する
    console.log(selector);
    
    /* 1. タブの選択状態のリセット */
    //いったん、すべての.tabs-menu > liからactiveクラスを削除するf
    $('.tabs-menu > li').removeClass('active');
    
    //いったん、すべての.tabs-content > sectionを非表示にする
    $('.tabs-content > section').hide();
    
    /* 2.選択されたタブの表示 */
    
    //.tabs-menu liのうち、selectorに該当するものにだけactiveクラスを付ける
    $(`.tabs-menu a[href="${selector}"]`)
    .parent('li')
    .addClass('active');
    
    //.tabs-content > sectionのうち、selectorに該当するものだけを表示する
    $(selector).show();
};

//タブがクリックされたらコンテンツを表示
$('.tabs-manu a').on('click', (e) => {
    //hrefへのページ遷移を止める
    e.preventDefault();
    
    //hrefの値を受け取った後、showTab()関数に渡す。e.targetはクリックされたタブ(.tabs-menu a)を表す
    const selector = $(e.target).attr('href');
    showTab(selector);
    
});

//初期状態として一番目のタブを表示
showTab('#tabs-1');

試したこと

コードの綴りの間違いによるエラーがないか、jQueryが正しく読み込まれているかを確認しましたが、動作しない原因を見つけることができずにいます。

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

AWS Cloud9を使用しています。

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

回答1件

ベストアンサー

js
1// $('.tabs-manu a')
2//           ↓
3   $('.tabs-menu a')

投稿2021/01/01 05:30

kei344

総合スコア69458

m_kwkb

2021/01/01 05:45

回答ありがとうございました。解決できました。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！