jQuery を利用して、現在のページのメニューデザインを変更

Question

jqueryを使って、現在いるページのリンクにクラスを追加すしたいです。

<nav>
    	<ul>
        	<li><a href="/"><span>HOME</span></a></li>
            <li><a href="/page01/"><span>SAMPLE01</span></a></li>
            <li><a href="/page02/"><span>SAMPLE02</span></a></li>
            <li><a href="/page03/"><span>SAMPLE03</span></a></li>
        </ul>
    </nav>

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

上記のように記述したところ、該当のページにクラスが追加されました。

しかし、例えば、『SAMPLE01』ページのいるときにも、『HOME』のメニューにもクラスが追加されてしまいます。
下層ページの際には、『HOME』にクラス追加されないようにしたいです。

よろしくお願いします。

Answer 1

    var url = location.origin + location.pathname + location.search;
    $('nav li a').each(function(){
        var $href = $(this).prop('href');
        if (url === $href) {
            $(this).addClass('current');
        }
    });

過去に同様の質問がありました。
https://teratail.com/questions/153620

Answer 2

反映させたいページが単一であればもちろんですが、複数ある場合も面倒でも各ページのaにクラスをつけて、その固有のセレクタに対しての処理をさせるのが一番かと。

Answer 3

必要なページにだけ、該当のコードを読み込ませてはいかがでしょうか？

Comments

[buk]

インクルードでできればと思っておりました。