読者です 読者をやめる 読者になる 読者になる

tohokuaikiのチラシの裏

技術的ネタとか。

Confluenceのプラグイン開発を承ります。ご連絡はこちらのホームページからお願いいたします。

メニューのトップ階層にONを付ける

JavaScript wordpress

なんか、WordPressのtwentytenというテーマで作ったのだけど結局使わなかったのでコピペ。

<div class="menu"><ul><li><a href="..."></li><li>....</li></ul></div>

みたいな階層があるときに、トップのやつにONクラスを付ける。
要:http://phpjs.org/functions/parse_url:485

前提として、メニューがちゃんとURLも階層になってること。

jQuery(function($){
    return function()
    {
        
        var getCorner = function(url){
            var corner = '';
            var path = parse_url(url).path.split('/');
            path = $.map(path, function(p,i){
                if (!p) return null;
                return p;
            });
            if (path.length > 0){
                corner = path[0];
            }
            return corner;
        }
        corner = getCorner(location.href);

        if (!corner) return ;

        $('div.menu>ul>li>a').each(function(i, a){
            var a_corner = getCorner(a.href);
            if (a_corner == corner){
                $(a).parent('li').addClass('on');
            }
        });
    }
}(jQuery));