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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

1042閲覧

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

murakami_shushu

総合スコア5

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/01/06 14:40

編集2020/01/07 10:01

最終更新 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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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の状態を確認するだけで済むのですが…?
guest

回答1

0

自己解決

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>

ご丁寧にご説明下さってありがとうございました。
頂いたご意見も今後の参考にさせて頂きます。

投稿2020/01/29 08:54

murakami_shushu

総合スコア5

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問