Neioumi
11/9/2015 - 9:26 AM

表示中のリンクとディレクトリを比較して、同じであればメニューのスタイルをアクティブに設定。

表示中のリンクとディレクトリを比較して、同じであればメニューのスタイルをアクティブに設定。

$(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');
        }
    });
});