jQuery-URL-Parserを使ってページの現在地をハイライトする

グローバルナビもサイドナビも自動的に現在地表示します。

ヘッダーで、jquery.jsとjquery.url.js後述のcurrent.jsを読み込んでいます。
参考サイト
URLを簡単にパースできるjQueryプラグイン「jQuery-URL-Parser」

JSを読み込みます

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.url.js"></script>
<script type="text/javascript" src="js/current.js"></script>

[current.js]JavaScript


// Globalnav current
$(function(){
   		var url = $.url();
        $dire = url.segment(4);　//どこの階層で判定？
		//alert($dire);

if(!$dire) {
                $dire = 'index.html';
        }
        $('.mod_Gnavi ul li img').each(function () {
                var $key  = $(this).parent('a').attr('id');
                var onMenu = $(this).attr('src').replace('_off.', '_on.');
                var ofMenu = $(this).attr('src').replace('_on.', '_off.');
				
				//top
				if($dire == 'index.html'){$('a#home img').attr('src', 'img/nav01_on.jpg');}
				//下層
                if (($key == $dire) || ($key == '')) {
                        $(this).attr('src', onMenu);
                } else {
                        $(this).attr('src', ofMenu);
                }
        });
});

// Sidenav current

$(function(){
		var url = $.url();
        $page = url.attr('file');
		//alert($page);

        if(!$page) {
                $page = 'index.html';
        }
        $('.mod_sidenav ul li a').each(function(){
                var $href = $(this).attr('href');
                if ( ($href == $page) || ($href == '') ) {
                        $(this).addClass('active');
                } else {
                        $(this).removeClass('active');
                }
        });
});

HTMl

<div class="mod_Gnavi">
<ul class="ex_clearfix">
<li><a id="home" href="../index.html"><img src="../img/nav01_off.jpg" width="150" height="45" alt="Menu01" /></a></li>
<li><a id="corp" href="index.html"><img src="../img/nav02_off.jpg" width="149" height="45" alt="Menu02" /></a></li>
<li><a id="service" href="../service/index.html"><img src="../img/nav03_off.jpg" width="149" height="45" alt="Menu03" /></a></li>
<li><a id="faq" href="../faq/index.html"><img src="../img/nav04_off.jpg" width="149" height="45" alt="Menu04" /></a></li>
</ul>
<!--mod_Gnavi_end --></div>
<p>&nbsp;</p>

<div class="mod_sidenav">
<ul>
<li><a href="index.html">indexメニュー</a></li>
<li><a href="001.html">001メニュー</a></li>
<li><a href="002.html">002メニュー</a></li>
<li><a href="003.html">003メニュー</a></li>
<li><a href="004.html">004メニュー</a></li>
<li><a href="005.html">005メニュー</a></li>
</ul>
<!-- mod_sidenav_end --></div>

CSS

/* GlobalNavi
-----------------------------------------*/
.mod_Gnavi ul{
	width:600px;
}
.mod_Gnavi ul li{
	width:150px;
	height:45px;
	float:left;
}
.mod_Gnavi ul li a{
	display:block;
}

/* Sidenav
-----------------------------------------*/
.mod_sidenav{
	width:150px;
}
.mod_sidenav ul{
	border:solid 1px #CCC;
	border-bottom:none;
}
.mod_sidenav ul li{
	border-bottom:solid 1px #CCC;
}
.mod_sidenav ul li a{
	padding:5px 5px 5px 20px;
	display:block;
	background:transparent url('img/Sidemenu_001.gif') no-repeat 5px 45% scroll;
}
.mod_sidenav ul li a:link    {color:#666; text-decoration:none;}
.mod_sidenav ul li a:visited {color:#666; text-decoration:none;}
.mod_sidenav ul li a:hover   {color:#666; background-color:#EEE;background-image: url('img/Sidemenu_001_over.gif');}
.mod_sidenav ul li a:active  {color:#666; background-color:#EEE;background-image: url('img/Sidemenu_001_over.gif');}
/* current */
.mod_sidenav ul li a.active{
	color:#666; background-color:#EEE;background-image: url('img/Sidemenu_001_over.gif');
}