jqueryが正しく動いてくれない

前提

jqueryを正しく動作させたい

実現したいこと

上記と同じです。
jqueryに指示を3つ出したいのですが、１つが機能してくれません。
(②のheader部分のクリックをすると、その部分にクラス名を追加するものが動いてくれません。）

該当のソースコード

html
1
2<!DOCTYPE html>
3<html lang="ja">
4
5<head>
6<meta charset="UTF-8">
7<meta http-equiv="X-UA-Compatible" content="IE=edge">
8<meta name="viewport" content="width=device-width, initial-scale=1.0">
9<title>Document</title>
10
11<link rel="favicon" href="/favicon.ico">
12
13
14<!-- reset css -->
15<link rel="stylesheet" href="/css/reset.css">
16<!-- font awesome -->
17<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
18
19<!-- drawer.css -->
20<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css"
21media="screen and (max-width:767px)">
22<!-- jquery & iScroll -->
23<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
24<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script>
25<!-- drawer.js -->
26<script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"></script>
27
28<!-- google font -->
29<link rel="preconnect" href="https://fonts.googleapis.com">
30<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
31<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Satisfy&display=swap" rel="stylesheet">
32
33<link rel="stylesheet" href="https://use.typekit.net/qph3iir.css">
34<!-- swiper -->
35<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />
36
37<!-- original -->
38<link rel="stylesheet" href="/css/style.css">
39<script src="/js/script.js"></script>
40</head>
41
42<body>
43<header class="header">
44<section class="header">
45<div class="header-container">
46
47<div class="header-flex">
48<a href="" class="header-container-img">
49<img src="/img/logo_header.png" alt="">
50</a>
51
52<nav class="header-nav">
53<ul class="header-ul">
54<li class="header-li">
55<a href="#about" >About</a>
56</li>
57<li class="header-li">
58<a href="#menu">Menu</a>
59</li>
60<li class="header-li">
61<a href="#shop">Shop</a>
62</li>
63<li class="header-li">
64<a href="#contact">Contact</a>
65</li>
66</ul>
67</nav>
68</div>
69
70</div>
71</section>
72
73</header>
74
75

scss
1
2
3.header {
4position: fixed;
5width: 100%;
6z-index: 1000;
7}
8
9.header-container {
10background-color: #2F2F2F;
11padding-left: 31px;
12padding-right: 70px;
13
14@include mq(sp) {
15padding-left: 18px;
16padding-right: 16px;
17}
18}
19
20.header-container-img {
21@include mq(sp) {
22width: 14.4%;
23}
24}
25
26.header-flex {
27display: flex;
28align-items: center;
29justify-content: space-between;
30padding: 20px 0;
31}
32
33.header-ul {
34display: flex;
35}
36
37.header-li {
38font-size: 1.8rem;
39line-height: calc(21.6/18);
40letter-spacing: 0.03em;
41color: #fff;
42font-family: 'reross-quadratic', sans-serif;
43position: relative;
44
45&::before {
46position: absolute;
47bottom: -3px;
48left: 0;
49content: '';
50width: 0;
51height: 2px;
52background-color: #F2F4F1;
53transition: .3s;
54}
55
56&:hover::before {
57width: 100%;
58}
59
60
61&:not(:first-child) {
62margin-left: 40px;
63
64@include mq(sp) {
65margin-left: 20px;
66}
67}
68
69@include mq(sp) {
70font-size: 1.4rem;
71line-height: calc(16.8/14);
72}
73}
74
75.header-li.active {
76color: red;
77// width: 100%;
78// border-bottom: 2px solid #000;
79// background-color: #F2F4F1;
80}

jquery
1①
2$(window).on("scroll", function () {
3
4    if (window.matchMedia("(max-width: 1023px)").matches) {
5        if (8400 < $(this).scrollTop()) {
6            $('.to-top').addClass('is-show');
7        } else {
8            $('.to-top').removeClass('is-show');
9        }
10    } else {
11        if (9200 < $(this).scrollTop()) {
12            $('.to-top').addClass('is-show');
13        } else {
14            $('.to-top').removeClass('is-show');
15        }
16    }
17});
18
19
20②
21$(function () {
22    $('.header-li').click(function () {
23        $('.header-li').removeClass('active');
24        $(this).addClass('active');
25        return false;
26    })
27});
28
29
30③
31$(function () {
32    $('a[href^="#"]').click(function () {
33        $('.nav-ul').removeClass('open');
34        let speed = 500;
35        let type = 'swing';
36        let href = $(this).attr("href");
37        let target = $(href == "#" || href == "" ? 'html' : href);
38        let position = target.offset().top;
39        $("html,body").animate({
40            scrollTop: position
41        }, speed, type);
42        return false;
43    })
44});
45
46

試したこと

書き方の順番を入れ替えたりしたのですが、うまくいきませんでした。
①③をコメントアウトすると、②は動くような状態です。
①②③を動かしたいのですが、どこが間違っているか分からず困り果てています。

よろしくお願いします。

recal

2022/05/20 03:36

htmlもおしえてください。

m.ts10806

2022/05/20 04:18

$(function () {}); の意味は理解されてますか？

m.ts10806

2022/05/20 04:19

あと、ブラウザの開発ツールのコンソールにエラーが出てないか確認してみてください。その結果を質問本文に追記してください。

退会済みユーザー

2022/05/20 05:07

htmlに文法エラーがないことも確認してください。 https://validator.w3.org

Lhankor_Mhy

2022/05/20 08:02

ご提示のコードを試してみましたが、問題が再現しませんでした。おそらく、ご提示の部分には原因はなさそうに思います。ご提示いただいていない部分に原因があるか、問題の共有が上手くできていないと思います。問題再現の手順をもう少し詳しく書いていただけますか？

退会済みユーザー

2022/05/21 05:07 編集

ありがとうございます。 html,scss追記しました

m.ts10806

2022/05/21 04:35

質問は編集できますし、コメント欄ではマークダウン使えませんので。

nekora

2022/05/30 04:00 編集

SCSSのコンパイルでエラーが出ました。私の環境だけでしょうか？ Compilation Error Error: no mixin named mq on line 14 of sass/c:\Users\xxxxx\Desktop\Untitled-5.scss >> @include mq(sp) {