jQuery日本語リファレンス

現在のページへのリンクをハイライトする

やはり横のナビゲーションメニューは「現在位置」がわかった方が良いなぁと思い、せっかくなのでサーバサイドではなくjQueryで実装してみました。

原理は簡単で、現在のURLから1階層ずつ遡りながら、一致するリンクを探しています。
完全に自分の環境任せなので、例えば次のようなケースであれば、コードの書き換えが必要です。

• httpからの絶対パスで指定している
• 逆に、現在ページからの相対パスで指定している("below/this/path/"など)
• 途中に"."や".."などのポインタが入る
• GETのパラメータが付いても被リンクと認められたい

コードが理解できれば、対応は容易だと思います。

以下がコードになりますが、方法としてセレクターにパスの捜索を委ねるより、ループを廻しながら文字列の最長一致を捜した方が恐らくレスポンスは良いでしょう。
せっかくのjQueryなので、ちょっと無理矢理、xPathを使ってみました。

$(document).ready(function(){
  var path_arr = document.URL.split('/');
  path_arr.shift();
  path_arr.shift();
  path_arr.shift();
  var link;
  while(path_arr.length){
    link=$('#navi').find('a[href^=/'+path_arr.join('/')+']');
    if(link.length){
      link.css({
        fontWeight: 'bold',
        color: 'red'
      });
      break;
    }
    path_arr.pop();
  }
});