現在のページのカレント表示機能をつけたい

Question

#該当のソースコード

   $(function(){
      $('.index li a').each(function(){
          var $href = $(this).attr('href');
          if(location.href.match($href)) {
          $(this).addClass('color');
          } else {
          $(this).removeClass('color');
          }
      });
    });

<ul class="index">
  <li><a href="company.html">会社概要</a></li>
  <li><a href="service.html">事業紹介</a></li>
  <li><a href="recruit.html">採用情報</a></li>
</ul>

.index li a.color:active{
   color: #ff8623;
}

#自分で調べたことや試したこと
・colorのclassが当たってないのでif文の記述が違うのか
・$('.index li a')の記述が間違えてるのか
・インデントミスか
など調べてみましたが、何も変化せず解決できませんでしたのでわかる方いらっしゃいましたらご教授よろしくお願い致します。

Comments

[m.ts10806]

$href
と
location.href
が何の情報を持っているか確認してみましたか？
「デバッグ」です。

[sk-sora--ypi]

デベロッパーツールを起動させて実際にcolorが付与されているか確認してみてください.
active擬似要素の意味は理解した上でつけているのでしょうか.

これはお節介ですが、
location.href.match($href)
のelseの部分、必要でしょうか.
初めからactiveクラスが与えられていないのであれば不要に思えます.

[ntk__7__ksn]

コメントしていただいてありがとうございます。
jsのデバックの仕方がわからず今現在も検索中で確認ができていない状況です。

activeはクリックしてる要素のスタイルを適用するというものだと思っています。

[m.ts10806]

「デベロッパーツール」の「Console」を活用してください。
利用のブラウザによるかもしれませんが、大抵はそうで、Javascriptにより書き換えられたあとのhtmlを確認できたり、要素の変化や、console.logやブレイクポイントを使うことで変数が保持する情報を確認できたりします。

[ntk__7__ksn]

詳しくありがとうございます。　　　　　　　　　　　　　　
$href
と
location.href
が何の情報を持っているか確認する時はどこにどのような記述をしたら良いのでしょうか？
if文前にconsole.logと記述するのでしょうか？

[m.ts10806]

console.log({確認したい内容})

今回なら
console.log($href);
console.log(location.href);

>if文前に
そうですね。分岐前のほうが良いです。
あと分岐内にも記述して「ここは通っているか」という確認することもできます。

[ntk__7__ksn]

お返事が遅くなり申し訳ございません。
詳しくご説明していただきありがとうございます。
色々と調べ無事実装することが出来ました。

Answer 1

変更前

    $(function(){
      $('.index li a').each(function(){
          var $href = $(this).attr('href');
          if(location.href.match($href)) {
          $(this).addClass('color');
          } else {
          $(this).removeClass('color');
          }
      });
    });

変更後

      $(function(){
        $('nav li a').each(function(){
          var target = $(this).attr('href');
          if(location.href.match(target)) {
            $(this).parent().addClass('color');
          } else {
            $(this).parent().removeClass('color');
          }
        });
      });

上記のような記述に変えたらうまく実装出来ました。