グローバルナビの現在ページのactive付与について

html
1                    <div class="overlay overlay-scale pc-nav">
2                        <nav class="global-navigation">
3                            <ul class="flex">
4                                <li><a href="../index.html">ホーム</a></li>
5                                <li><a href="../service/index.html">事業案内</a></li>
6                                <li><a href="../company/index.html">会社案内</a></li>
7                                <li><a href="../construction/index.html">施工事例</a></li>
8                                <li><a href="../recruit/index.html">採用案内</a>
9                                    <ul class="child child01">
10                                        <li><a href="../staff/index.html">社員紹介</a></li>
11                                        <li><a href="../flow/index.html">一日の流れ</a></li>
12                                        <li><a href="../faq/index.html">よくある質問</a></li>
13                                    </ul>
14                                </li>
15<!--
16                                <li class="pn"><a href="./staff/index.html">社員紹介</a></li>
17                                <li class="pn"><a href="./flow/index.html">一日の流れ</a></li>
18                                <li class="pn"><a href="./faq/index.html">よくある質問</a></li>
19-->
20                                <li class="pn"><a href="./contact/index.html">お問い合わせ</a></li>
21                            </ul>
22                        </nav>
23                    </div>
24

css
1
2.pc-nav {
3	clear:both;
4	width:100%;
5	padding-top:20px;
6}
7	.pc-nav li {
8		font-size:16px;
9		letter-spacing:0.05em;
10		color:#fff;
11	}
12	.pc-nav li a {
13		color:#fff;
14		text-decoration:none;
15	}
16	.pc-nav li a:hover,
17	.pc-nav li a:active {
18		border-bottom:2px solid #fff;
19	}
20.pc-nav li a.active{border-bottom:2px solid #fff;}
21	
22

js
1$(function(){
2    $('.pc-nav li a').each(function(){
3        var $href = $(this).attr('href');
4        if(location.href.match($href)) {
5        $(this).addClass('active');
6        } else {
7        $(this).removeClass('active');
8        }
9    });
10});
11

上記のグローバルナビにjｓで現在ページがわかるactiveクラスを付与しているのですが、
ホーム以外のページでもグローバルナビのホームがactiveになってしまいます。
ホーム以外のページではホームのボタンがactiveにならないようにするにはどうしたらいいでしょうか。

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

回答1件

相対パスで使用している ../ の . が match メソッドでワイルドカードとして扱われているのが原因のようです。

多少強引ですが相対パスを完全なURLに置き換えて比較してみてはどうでしょうか。

JavaScript
1$(function () {
2    $(".pc-nav li a").each(function () {
3        var href = location.hostname;
4
5        href += $(this).attr('href').replace(//?(.+/)+/g, "/").replace(/^/?/, "/");
6
7        if (location.href === href)) {
8            $(this).addClass("active");
9        } else {
10            $(this).removeClass("active");
11        }
12    });
13});