Javascriptを機能させたい

htmlにおいてjavascriptを機能させたい
メニューバーをクリックした際に、メニューを表示させたい

前提

html, css, javascriptを使用してホームページを作成しています。
メニューバーを作成する際に、こちらのサイトを参考にjavascriptを書きましたが、記載したコードが認識されず、メニューバーをクリックしても反応がない状態です。
また、現段階ではエラーが表示されていません。(なので、本当に何が原因で動作しないのかがわからないです、、)

html名：index1.html
css名：stylesheet1.css
javascript名：5-2-3.js

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5<meta charset="utf-8">
6<title>5-2-3 3本線が1本線に</title>
7<meta name="description"  content="書籍「動くWebデザインアイディア帳」のサンプルサイトです">
8
9<meta name="viewport" content="width=device-width,initial-scale=1.0">
10<!--==============レイアウトを制御する独自のCSSを読み込み===============-->
11<link rel="stylesheet" type="text/css" href="stylesheet1.css">
12
13</head>
14
15<body>
16  <div class="container">
17      <header class="header">
18        <div class="header__inner">
19          <h1 class="header__title header-title">
20            <a href="#">ロゴ</a>
21          </h1>
22
23          <nav class="header__nav nav" id="js-nav">
24            <ul class="nav__items nav-items">
25              <li class="nav-items__item"><a href="">メニュー</a></li>
26              <li class="nav-items__item"><a href="">メニュー</a></li>
27              <li class="nav-items__item"><a href="">メニュー</a></li>
28              <li class="nav-items__item"><a href="">メニュー</a></li>
29            </ul>
30          </nav>
31
32          <button class="header__hamburger hamburger" id="js-hamburger">
33            <span></span>
34            <span></span>
35            <span></span>
36          </button>
37        </div>
38      </header>
39      <main>
40        <div class="main">
41          メインコンテンツエリア
42        </div>
43      </main>
44      <footer class="footer">
45        <div>
46          フッターエリア
47        </div>
48      </footer>
49    </div>
50  <script type="text/javascript" src="5-2-3.js"></script>
51  </body>
52</html>
53

css
1a {
2  text-decoration: none;
3}
4
5ul,
6li {
7  list-style: none;
8}
9
10
11main {
12  background-color: #f1f1f1;
13  height: 800px;
14  display: flex;
15}
16
17
18.main {
19  margin: auto;
20}
21
22.footer {
23  background-color: #f6f6f6;
24  height: 200px;
25  display: flex;
26}
27
28.footer div {
29  margin: auto;
30}
31
32
33/* ヘッダー */
34
35
36.header {
37  background-color: white;
38  width: 100%;
39  height: 50px;
40  position: fixed;
41  top: 0;
42  left: 0;
43  right: 0;
44  z-index: 999;
45}
46
47.header__inner {
48  padding: 0 20px;
49  display: flex;
50  align-items: center;
51  justify-content: space-between;
52  height: inherit;
53  position: relative;
54}
55
56
57/* ヘッダーのロゴ部分 */
58.header__title {
59  width: 80px;
60}
61
62
63@media screen and (min-width: 960px) {
64  .header__title {
65    width: 120px;
66  }
67}
68
69.header__title img {
70  display: block;
71  width: 100%;
72  height: 100%;
73}
74
75/* ヘッダーのナビ部分 */
76
77.header__nav {
78  position: absolute;
79  right: 0;
80  left: 0;
81  top: 0;
82  width: 100%;
83  height: 100vh;
84  transform: translateX(100%);
85  background-color: #fff;
86  transition: ease .4s;
87}
88
89
90@media screen and (min-width: 960px) {
91  .header__nav {
92    position: static;
93    transform: initial;
94    background-color: inherit;
95    height: inherit;
96    display: flex;
97    justify-content: end;
98    width: 50%;
99  }
100}
101
102
103@media screen and (min-width: 960px) {
104  .nav__items {
105    width: 100%;
106    display: flex;
107    align-items: center;
108    height: initial;
109    justify-content: space-between;
110  }
111}
112
113.nav-items {
114  position: absolute;
115  top: 50%;
116  left: 50%;
117  transform: translate(-50%, -50%);
118  padding: 0;
119}
120
121
122
123@media screen and (min-width: 960px) {
124  .nav-items {
125    position: inherit;
126    top: 0;
127    left: 0;
128    transform: translate(0, 0);
129
130  }
131}
132
133/* ナビのリンク */
134.nav-items__item a {
135  color: black;
136  width: 100%;
137  display: block;
138  text-align: center;
139  font-size: 20px;
140  margin-bottom: 24px;
141  color: black;
142}
143
144.nav-items__item:last-child a {
145  margin-bottom: 0;
146}
147
148@media screen and (min-width: 960px) {
149  .nav-items__item a {
150    margin-bottom: 0;
151  }
152}
153
154
155/* ハンバーガーメニュー */
156
157.header__hamburger {
158  width: 48px;
159  height: 100%;
160
161}
162
163.hamburger {
164  background-color: transparent;
165  border-color: transparent;
166  z-index: 9999;
167}
168
169@media screen and (min-width: 960px) {
170  .hamburger {
171    display: none;
172  }
173}
174
175/* ハンバーガーメニューの線 */
176.hamburger span {
177  width: 100%;
178  height: 1px;
179  background-color: #000;
180  position: relative;
181  transition: ease .4s;
182  display: block;
183}
184
185.hamburger span:nth-child(1) {
186  top: 0;
187}
188
189.hamburger span:nth-child(2) {
190  margin: 8px 0;
191}
192
193.hamburger span:nth-child(3) {
194  top: 0;
195}
196
197
198/* ハンバーガーメニュークリック後のスタイル */
199.header__nav.active {
200  transform: translateX(0);
201}
202
203.hamburger.active span:nth-child(1) {
204  top: 5px;
205  transform: rotate(45deg);
206}
207
208.hamburger.active span:nth-child(2) {
209  opacity: 0;
210
211}
212
213.hamburger.active span:nth-child(3) {
214  top: -13px;
215  transform: rotate(-45deg);
216}
217

javascript
1const ham = $('#js-hamburger');
2const nav = $('#js-nav');
3ham.on('click', function () { //ハンバーガーメニューをクリックしたら
4  ham.toggleClass('active'); // ハンバーガーメニューにactiveクラスを付け外し
5  nav.toggleClass('active'); // ナビゲーションメニューにactiveクラスを付け外し
6});
7

試したこと

他にも参考にしたサイトのhtml, css, javascriptはあるのですが、それらの時も、クリックしても反応がありませんでした。
特にエラーメッセージが表示されている訳でもないのですが、どうしてもjavascriptが何故反映されないのか知りたいので、どうぞよろしくお願いいたします。

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

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

退会済みユーザー

2023/02/20 07:45

ブラウザのデベロッパーツールを使ってデバックしてください。それがあなたの環境で今すぐできるのはあなただけです。回答者閲覧者はデバッガではありません。

int32_t

2023/02/20 07:47

> また、現段階ではエラーが表示されていません。コードがこの通りなら、ブラウザの開発者ツールのコンソールにエラーが出ているはずです。

hoshi-takanori

2023/02/20 07:51

jquery を読み込んでないような…。

r4all

2023/02/20 08:23

皆様、回答ありがとうございます。すぐデベロッパーツールで原因がないか見てみます。また、jqueryの読み込み方についても調べてみます！手段を教えていただきありがとうございます！！助かりました。

退会済みユーザー

2023/02/20 08:32

頑張ってください。そういう風に答えられる人はツールの使い方などが分かれば自己解決できると思います。

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

回答1件

もう解決しているかもしれませんが…
<head> タグの中に以下の行を追加してjQueryを読み込ませてください。

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

これだけで解決します。
なお、ブラウザの幅が広い場合ハンバーガーメニューが表示されないようになっているのでブラウザの幅を狭くする必要があります。

投稿2023/02/21 02:33

YakumoSaki

総合スコア2027

あなたの回答

tips

プレビュー

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

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

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.31%

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

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

質問する

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

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

Javascriptを機能させたい