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

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

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

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

HTML

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

Q&A

解決済

3回答

2051閲覧

jQuery3.3.1で開いているURLからActiveクラスを付加させたい

misonya

総合スコア25

jQuery

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

HTML

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

0グッド

0クリップ

投稿2018/10/22 17:59

Bootstrap4を使用していて、必然的にjQuery3.3.1を入れているのですがその状態で現在のページを取得し、li要素にactiveクラスを追加したいです。
いろいろ調べて下記のコードまで辿り着いてエラーはなくなったのですが動作せず困っています。
何が間違っているのかご教授願います。
参考URL:https://teratail.com/questions/51918

html

1<div id="navbars" class="collapse navbar-collapse"> 2 <ul id="nav" class="navbar-nav ml-auto"> 3 <li class="nav-item"><a class="nav-link" href="xxx.html">リンク</a></li> 4 <li class="nav-item"><a class="nav-link" href="xxx.html">リンク</a></li> 5 <li class="nav-item"><a class="nav-link" href="xxx.html">リンク</a></li> 6 </ul> 7</div>

js

1$(window).on('load', function(){ 2 $('#nav').find('a').each(function() { 3 if (location.pathname == $(this).attr('href')) { 4 $(this).parent('li').addClass('active'); 5 } 6 }); 7});

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

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

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

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

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

guest

回答3

0

とりあえずこれで十分

javascript

1$(function(){ 2 $('#nav a[href="'+location.pathname+'"]').closest('li').addClass('active'); 3});

location.pathnameの値をよく精査したほうがよいでしょう

投稿2018/10/23 00:45

yambejp

総合スコア114572

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

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

misonya

2018/10/23 04:16

わかりやすい回答ありがとうございます!
guest

0

ベストアンサー

おそらく、条件文の中身で取得している location.pathname が、 a 要素にある href 属性とマッチしていないことが原因だと思います。

location.pathname を適当に加工するなどして、現在のページまでのパスを除去してから比較するなどの方法で修正できると思います。

(補足)
location.pathname はURL のパス部分を表すので、例えばこのページ( https://terateil.com/questions/153620)なら、 /questions/153620 が格納されています。

例えばこの場合に <a href="153620">にマッチさせたいなら、

javascript

1if(location.pathname == $(this).attr('href')){ 2 ... 3}

の部分を、

javascript

1if(location.pathname == '/questions/'+ $(this).attr('href')){ 2 ... 3}

とする必要があります。

投稿2018/10/22 18:24

R.Mizukami

総合スコア1077

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

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

misonya

2018/10/23 04:15

location.pathnameをよく理解もせず書いていたのが間違いでした。 指摘と補足で理解できました!ありがとうございます
guest

0

href属性ではなくhrefプロパティを見たほうがいいでしょう。

jQuery

1 if (location.href === $(this).prop('href')) { 2 $(this).parent('li').addClass('active'); 3 }

https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/href

投稿2018/10/23 04:26

x_x

総合スコア13749

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問