###実現したいこと
現在閲覧しているページのナビゲーションに「class="active"」をつけてCSSで異なる装飾をしたいと思っています。
「ページアンカー」が無い場合は実現できたのですが、「ページアンカー」がつく場合、どのように記述すれば良いかわからず困っております。
例えば下記3つのページがあり、共通のナビゲーションを設置しています。
※CMSで作成しており、静的ページではないため末尾はスラッシュで終わります。
http://example.com/aaa/
http://example.com/bbb/
http://example.com/ccc/
html
1<!--共通ナビゲーション--> 2<ul class="navigation"> 3 <li><a href="http://example.com/aaa/"></li> 4 <li><a href="http://example.com/bbb/"></li> 5 <li><a href="http://example.com/ccc/"></li> 6</ul>
「ページアンカー」が無しの場合、例えばページ「http://example.com/bbb/」にいるときに<li><a href="bbb" class="active"></li>にするには下記ソースでうまくいきました。
###アンカー無しで動作する記述
javascript
1var url = window.location; 2$('.navigation li a[href="'+url+'"]').addClass('active');
ただ、上記ですとURLが完全に一致した場合でないと動作せず、ページアンカーがついた場合は「active」が外れた状態になってしまいます。
アドレスバーのURLが例えば下記の様になっていても「class="active"」がつくように、するにはどのように記述をしたら良いでしょうか。
例)
http://example.com/bbb/#anchor-01
http://example.com/bbb/#anchor-02
「document.URL.match」あたり等、色々と調べながら試行錯誤しているのですがなかなか糸口が見えず、初歩的な質問となりますが、何卒ご教授いただけないでしょうか。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/01/21 04:36
2017/01/21 05:08
2017/01/21 05:16