ヘッダーメニューのカレント表示

最終更新 1月7日19時
HTML, CSSコードに変更を加えました

前提・実現したいこと

jQueryを使った簡単なWebサイトを作成しています。
表示しているページに合わせてメニューのリストにクラスを与え、文字の色を変えたいです。

ですが、なかなか上手くいきません。

現在のソースを下記に記載いたします。
問題点が分からないため、該当以外の箇所のコードも添付させて頂きます。

ファイルの読み込み等に不備があった場合も、どうかご指摘ください。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <meta http-equiv="X-UA-Compatible" content="ie=edge">
7  <title>test</title>
8
9  <script
10  src="https://code.jquery.com/jquery-3.4.1.js"
11  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
12  crossorigin="anonymous"></script>
13  <script type="text/javascript" src="./script.js"></script>
14  <link rel="stylesheet" href="./style.css">
15
16</head>
17<body>
18  <header>
19    <nav id="menu">
20        <ul>
21          <li><a href="#card">Card</a></li>
22          <li><a href="#news">News</a></li>
23          <li><a href="#price">Price</a></li>
24          <li><a href="#access">Access</a></li>
25          <li><a href="#contact">Contact</a></li>
26        </ul>
27    </nav>
28  </header>
29
30
31  <div class="container section-1" id="card"></div>
32  <div class="container section-2" id="news"></div>
33  <div class="container section-3" id="price"></div>
34  <div class="container section-4" id="access"></div>
35  <div class="container section-5" id="contact"></div>
36</body>
37</html>

CSS
1header nav {
2  position: fixed;
3  top: 0;
4  background-color: #fff;
5}
6
7header nav li a.current {
8  color: red;
9}
10
11header nav li a:hover {
12  color: red;
13}
14
15.container {
16  height: 500px;
17}
18
19.container.section-1 {
20  background-color: red;
21}
22
23.container.section-2 {
24  background-color: blue;
25}
26
27.container.section-3 {
28  background-color: green;
29}
30
31.container.section-4 {
32  background-color: orange;
33}
34
35.container.section-5 {
36  background-color: pink;
37}

JavaScript
1$(function() {
2  $('#menu li a').each(function(){
3    var $href = $(this).attr('href');
4    if (location.href.match($href)) {
5    $(this).addClass('current');
6    } else {
7    $(this).removeClass('current');
8    }
9  });
10});

ページに合わせて文字の色を赤色に変化させたいのですが、変化しません。

試したこと

teratailに載っていた、私と同じような質問には目を通しました。
JavaScriptのコードは間違っていないのではないかと...

間違っている場所が皆目見当もつかないので、質問させて頂きました。
初心者で至らない点も多々あると思いますが、どうかよろしくお願いします。

###補足情報
使用しているツール等を記載させて頂きます。

OS Windows10
ブラウザ Google Chrome
エディター VSCode

H40831

2020/01/06 15:29

<li>にcurrentクラスをつける動作は正常に機能していますか？

Lhankor_Mhy

2020/01/07 00:50

当方でご提示のコードを試してみましたが、問題なく動作しています。環境の問題か、または、ご提示いただいていない部分に問題があるのかもしれません。一応、念のため確認ですが、「ヘッダのアンカーをクリックしたら文字色が変わる」という動作を想定されているわけではないですよね？

murakami_shushu

2020/01/07 09:49

ご指摘ありがとうございます。 H40831様私の力不足で大変申し訳ないのですが、クラス付与の動作の確認方法を存じ上げておりません。自分なりに確認方法を調べましたが、解決に至りませんでした。具体的な方法、または参照すべきサイト等がありましたら、お手数ですが教えて頂けませんか？ Lhankor_Mhy様わざわざご確認して頂いてありがとうございます。再度自分でいろいろ試してみましたが、やはり上手く動きません。またご指摘して頂いている通り、クリックで文字の色を変えたいのではありません。画面のスクロールに応じて、文字の色を変更するのが目的です。該当以外のコードも詳しく載せさせていただきます。また私が使用しているツールも同時に掲載させて頂くので、ご確認して頂ければ幸いです。

H40831

2020/01/07 10:03 編集

Web系の制作は、ブラウザの検証ツール(デベロッパーツール、開発者ツールとも言う)で確認しながら制作するものです。ご自身の勉強されてる資料の中にもあるかと思うので、先にそちらの使い方を学習したほうがいいですよ。

Lhankor_Mhy

2020/01/07 10:03

『画面のスクロールに応じて、文字の色を変更する』とは、具体的にはどのようなふるまいですか？私はこの質問の目的を、「別のページからhttp://example.com/#cardに移動した際に、cardの文字色を赤くする」と読みましたが、相違ありませんか？

murakami_shushu

2020/01/07 10:15

H40831様早速のご対応ありがとうございます。 JavaScriptを使って間もないせいか、検証ツールでHTMLやCSS以外の動作確認をできることを知りませんでした。もちろんGoogle Chromeの検証ツールは日々使用しているのですが.. 温かいご指摘ありがとうございます。確認してみます。

murakami_shushu

2020/01/07 12:27

Lhankor_Mhy様想定していたのは1ページ内でのヘッダーのアニメーションです。各セクションごとにidを設け、あるセクションに留まっている間はそのセクションに対応するメニューのリストの色を変化させようとしていました。指摘いただいてようやく気付いたのですが、私が望んでいる動きと上記のコードにはズレがあるようですね...

H40831

2020/01/07 13:02

クラスをつける動作が正常に機能しているかを確認するだけなら、 JavaScriptの動作確認ではなく、HTMLの状態を確認するだけで済むのですが…？

Lhankor_Mhy

2020/01/08 00:27

> 各セクションごとにidを設け、あるセクションに留まっている間はそのセクションに対応するメニューのリストの色を変化させようとしていました。それでしたら、Intersection Observer API がいいかもしれませんね。 https://developer.mozilla.org/ja/docs/Web/API/Intersection_Observer_API

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

回答1件

自己解決

Bootstrapを使って実装しました。
htmlコードの一部を記載いたします。

html
1<body data-spy="scroll" data-target="#menu">
2  <header>
3    <nav class="navbar fixed-top" id="menu">
4      <div class="collapse navbar-collapse" id="navbar">
5        <ul class="nav navbar-nav nav-pills">
6          <li class="nav-item"><a class="nav-link" href="#card">Card</a></li>
7          <li class="nav-item"><a class="nav-link" href="#news">News</a></li>
8          <li class="nav-item"><a class="nav-link" href="#price">Price</a></li>
9          <li class="nav-item"><a class="nav-link" href="#access">Access</a></li>
10          <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
11        </ul>
12      </div>
13    </nav>
14  </header>
15  
16  <div class="container section-1" id="card"></div>
17  <div class="container section-2" id="news"></div>
18  <div class="container section-3" id="price"></div>
19  <div class="container section-4" id="access"></div>
20  <div class="container section-5" id="contact"></div>
21<body>