トランスビット
トランスビットの開発ノート Webサイト制作に役立つTipsやトラブルシューティングなどの備忘録

ファイル名を取得して現在地表示

拡張子付、拡張子なし、ファイル名取得用の変数はどっちも便利。
私の場合、現在地表示に使うことがほとんどです。
トランスビットの外の人のデザインにもよりますが、親カテゴリに対して現在地表示をするものの場合、[ 親カテゴリ名_hoge.html ]のように、親の名を子に継承した形でファイル名付けておけば、あとは条件文をちょっと変えてやるだけでOK。

var url = window.location.href;
var filename = url.match(".+/(.+?)([\?#;].*)?$")[1]; // 拡張子付
var filename_only = url.match(".+/(.+?)\.[a-z]+([\?#;].*)?$")[1]; // 拡張子なし

//リスト形式のナビゲーションに現在地表示のためのclassを付与
  $('nav li a').each(function() {
    var $href = $(this).attr('href');
    if ($href.match(filename)) {
      $(this).parent().addClass("current"); // liに付与
    }
  });

なんで最近、現在地表示用のscript書いたり書かなかったりするんやろ……と、よくよく考えてみたら、Wordpress案件の時は、端から付与されているclassを利用したり、phpで処理してしまうからなんですね。得心しました。

Filed under: