jquery 現在のurl に active をつける

2013年10月2日更新 view: 87 view
photoBy: http://jquerymobile.com/wp-content/uploads/2012/0…

今、いるページをわかりやすく

CDNから読み込む

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-url-parser/2.3.1/purl.min.js"></script>

コード

<script>

        $(function () {
            var url = $.url();
            host = 'http://'+url.attr('host');
            to_link = url.attr('source').replace(host,"");
            $('a[href="'+to_link+'"]').addClass('active');
//$('a[href="'+to_link+'"]').parent('li').addClass('active');// a /controller/action/params... の直上li に active class をつける
        });

    </script>

以下は古いです。

jsをダウンロード

以下からDLして jquery と共に設置。
http://www.webopixel.net/javascript/416.html

a タグ、その直上 li タグに active をつける。

$(function() {
    
    url = $.url(location.href);
    host = 'http://'+ url.attr('host');//http://www.hogeman.com
    to_link = url.attr('source').replace(host,"");// /controller/action/params....
    

    $('a[href="'+to_link+'"]').addClass('active');// a /controller/action/params... に active class をつける
    $('a[href="'+to_link+'"]').parent('li').addClass('active');// a /controller/action/params... の直上li に active class をつける
    
});

これで a href の 現在のURLが相対パスで書かれていても、active class が自動付加されます。

指定したパスを含む場合、activeをつける

上記の場合は

スポンサードリンク

例えば、 http://meigen-plus.com/c/category_id:1/ からのページ送りで、
http://meigen-plus.com/c/category_id:1/page:2/ のurlになると、前者が active にならない。

今回は、 catregory_id:1 を リンク先に含む場合、クラスをつけるをします。

<script src="/app/webroot/js/purl.js"></script>

<script>


$(function() {
    
    //http://meigen-plus.com/c/category_id:3/page:2
    var url = $.url();
    
    var url_ar = url.attr('source').split('/');
    /*
        http:
        meigen-plus.com
        c
        category_id:3
        page:2
    */
    
    //配列の場合
    $.each(url_ar, function(i) {

        //category_id があれば category に格納
        if(url_ar[i].indexOf('category_id') > -1){
            category = url_ar[i];
        }

    });
    
    //正規表現 category_id:3 をリンク先に含む場合は nowactive クラスをつける
    $('a[href*="'+category+'"]').addClass('nowactive');
});

</script>

これでOK!

スポンサードリンク

関連記事

関連カテゴリ