表示中のリンクとディレクトリを比較して、同じであればメニューのスタイルをアクティブに設定。
$(function(){
$('.header-nav li a').each(function(){
// 表示中のページ
var $href = $(this).attr('href');
// 表示中のディレクトリを抽出
var $dir = location.href.split("/");
var $dir2 = $dir[$dir.length -2];
// メニューのリンクからディレクトリを抽出
var $navDir = $(this).attr('href').split("/");
var $navDir2 = $navDir[$navDir.length -2];
// 表示中のページとメニューのリンクが同一の場合、メニューをアクティブに
if(location.href.match($href)) {
$(this).parent('li').addClass('active');
}
// 表示中のディレクトリとメニューのディレクトリが同一の場合、メニューをアクティブに
else if($dir2.match($navDir2)) {
$(this).parent('li').addClass('active');
} else {
$(this).parent('li').removeClass('active');
}
});
});