ページ内リンクがある共通メニューに、URLから自分の現在地を判定しクラスを付与する方法

Question

共通メニューにurlを判定しactiveというクラスを付与したいです。
通常のメニューならjsが動いてclass="active"を付与できたのですが、ページ内リンクを設定したところ#が入ったことによりクラスを付与できなくなってしまいました。
ページ内リンク付きの共通メニューをクリックすると以下のurlに遷移します。
http://○○○○.com/page04/#part01
上手く自分の居場所を反映しクラスactiveを付与することは出来ますでしょうか。

お助けいただけると幸いです。

<nav>
  <ul>
    <li><a href="/page01">PAGE01</a></li>
    <li><a href="/page02">PAGE02</a></li>
	<li><a href="/page04#part01">PART01</a></li>
	<li><a href="/page04#part02">PART02</a></li>
	<li><a href="/page04#part03">PART03</a></li>
  </ul>
</nav>

var activeurl = location.pathname.split('/')[1];
$(document).ready(function() {
  $('nav li a').each(function(){
    var array = $(this).attr('href').replace('/' , '');
    if( activeurl.search(array) !== -1 ) {
      $(this).addClass('active');
    }
  });
});

Comments

[Lhankor_Mhy]

/page04 にいる時は、PART01、PART02、PART03 に class="active" をつける、ということでいいですか？

[zun30]

はい。/page04は内部でPART01、PART02、PART03の3つの要素が入っていて
<li><a href="/page04#part01">PART01</a></li>をタップしたら
<li><a href="/page04#part01" class="active">PART01</a></li>
↑このような状態にしたいです。

[Lhankor_Mhy]

つまり、

/page04 に移動
↓
<li><a href="/page04#part01" class="active">PART01</a></li>
<li><a href="/page04#part02" class="active">PART02</a></li>
<li><a href="/page04#part03" class="active">PART03</a></li>

そこで「PART01」をクリック（/page04#part01に移動）
↓
<li><a href="/page04#part01" class="active">PART01</a></li>
<li><a href="/page04#part02">PART02</a></li>
<li><a href="/page04#part03">PART03</a></li>

という理解で合っていますか？

[zun30]

すみません。
<li><a href="/page04#part01" class="active">PART01</a></li>
<li><a href="/page04#part02" class="active">PART02</a></li>
<li><a href="/page04#part03" class="active">PART03</a></li>
この状態は無くて、 class="active"は共通ナビのうち一つだけに付与したいと考えています。
/page04を直で訪れた場合は class="active"はどこにも付与されず、
http://○○○○.com/page04/#part01の場合は
<li><a href="/page04#part01" class="active">PART01</a></li>
となるような仕組みを作りたいです。
class="active"にはcssでナビボタンを目立たせる装飾をし、ユーザーの方がどのページにいるのかを分かり安く明示したいと考えております。

[Lhankor_Mhy]

問題を把握しました。

Answer 1

まず、URLフラグメント（ハッシュ）による移動には、hashchangeイベントを使う方がいいです。直接のリンクにも対応するのであれば'load hashchange'とすればいいかと思います。
次に、.attr('href')だと属性値を取ってしまうので、$(this)[0].hrefなどとして、HTMLHyperlinkElementUtils.hrefを取得するようにすると、location.hrefと一致するので余計な手間が省けると思います。

ご不明の点がありましたら、コメントでお知らせください。