グローバルナビゲーションで現在のページ（カレントページ）にclassを自動追加したい（階層にも対応）

jQueryを使って現在見ているページのナビゲーションにクラス名を付与したいです。

jQueryを使って現在見ているページのナビゲーションにクラス名を付けてどのページを見ているかわかるようにしています。

例えば、会社概要のページを見ていると

<li><a href="../outline/">会社概要</a></li> ↓ <li class="current"><a href="../outline/">会社概要</a></li> のようにクラス名が付与されます。

HTML

<ul id="menu">
  <li><a href="./">トップページ</a></li>
  <li><a href="../business/">事業内容</a></li>
  <li><a href="../outline/">会社概要</a></li>
  <li><a href="../outline/message/">ごあいさつ</a></li>
  <li><a href="../access/">アクセス</a></li>
</ul>

jQuery

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

開いているページとマッチすれば、a要素の親であるli要素に「current」というクラスを追加します。
そうでなければ、.currentは削除するというものです。

困っていること

現状のjQueryの書き方だと
下記のように1階層入っただけのページはクラス名が付与されるのですが、

下記のように2階層入ったページになるとクラス名が付与されません。

<li><a href="../outline/message/">ごあいさつ</a></li>

また、トップページで階層がない場合もクラス名が付与されません。

<li><a href="./">トップページ</a></li>

階層が2階層目3階層目と深くなっていった場合もクラス名が付与されるようにしたいです。
しして、できればトップページも認識してクラス名が付与されるようにしたいです。

ご協力いただけますと幸いです。
宜しくお願いいたします。

kei344

2018/12/12 06:38

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

shic00

2018/12/12 07:37

質問が分かりにくくて申し訳ありません。書き直してみました。

kei344

2018/12/12 16:14

example.com/outline/message/ の時に <li><a href="../outline/">会社概要</a></li> にもクラス名が付くのでしょうか？どのURLの時にどの部分にクラス名が必要かを明確にしてみてください。

shic00

2018/12/13 01:09

example.com/outline/message/ の時には上位階層のexample.com/outline/ のページのナビゲーション<li><a href="../outline/">会社概要</a></li>にはクラスがつかず、現在のページにだけクラス名が付くようにしたいです。

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

回答1件

パラメータを含んでマッチさせたいのかにもよりますね

javascript
1<style>
2.current{color:red;}
3</style>
4<script>
5$(function(){
6  $('a').filter(function(){return $(this).prop('href')==location.href}).addClass('current');
7});
8</script>
9<a href="http://www.google.com">http://www.google.com</a>
10<a href="self.html">self</a>
11<a href="self.html?a=1">self?a=1</a>
12<a href="other.html">other</a>