【jQuery】グローバルナビゲーションで現在のページ（カレントページ）にclassを自動追加

備忘。

URLを取得し、自動的にclassを追加する。
グローバルナビゲーションなどに。

1 やり方

やり方

jQuery読み込み

まずjQueryを読み込みます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

1	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

HTMLソース

<ul id="gNav">
 <li class="gnav1"><a href="/">メニュー1</a></li>
 <li class="gnav2"><a href="page2">メニュー2</a></li>
 <li class="gnav3"><a href="page3">メニュー3</a></li>
 <li class="gnav4"><a href="page4">メニュー4</a></li>
</ul>

</ul>

<a>タグにclass[current]を追加

実行結果：<li class="gnav1"><a class="current" href="/">メニュー1</a></li>

/*==================================================================
<a>に追加
==================================================================*/
$(function(){
    $('#gNav li a').each(function(){
        var $href = $(this).attr('href');
        if(location.href.match($href)) {
            $(this).addClass('current');
        } else {
            $(this).removeClass('current');
        }
    });
});

/*==================================================================

<a>に追加

==================================================================*/

$(function(){

$('#gNav li a').each(function(){

var $href = $(this).attr('href');

if(location.href.match($href)) {

$(this).addClass('current');

} else {

$(this).removeClass('current');

}

});

対象となる<a>タグの、親<li>にclass[current]を追加

実行結果：<li class="gnav1 current"><a href="/">メニュー1</a></li>

に追加" >
/*==================================================================
親の<li>に追加
==================================================================*/
$(function(){
    $('#gNav li a').each(function(){
        var $href = $(this).attr('href');
        if(location.href.match($href)) {
            $(this).parent('li').addClass('current');
        } else {
            $(this).parent('li').removeClass('current');
        }
    });
});