[JS]jQueryを利用して現在のページのメニューデザインを変更する方法

Javascript・jQuery

2012.09.09

jQueryを利用して特定の要素にクラスを付けたり外したりする処理のご紹介です。

例えば、グローバルメニューやサイドメニューなどをクリックした時、現在のページ（カレントページ）であるメニューのデザインを変更して、「今このページにいます」という見せ方ができるようになります。

Javascriptの記述例
CSSの記述例
HTMLの記述例

Javascriptの記述例

<head>内にjqueryファイルを設置し、以下のようなjavascriptのコードを記述します。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
	$('#nav li a').each(function(){
		var $href = $(this).attr('href');
		if(location.href.match($href)) {
		$(this).addClass('active');
		} else {
		$(this).removeClass('active');
		}
	});
});
</script>

$(function(){

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

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

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

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

} else {

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

}

});

</script>

今回の例では、現在のページのメニューにclass=”active”を付けることで、メニューが選択された状態（active な状態）とそうでない状態とでデザインを変えます。

CSSの記述例

以下のCSSのサンプルですが、グローバルメニューを想定してリストを横並びにしています。

メニューが選択された状態は#nav li a.activeで、選択されていない状態は#nav li aで、それぞれ背景色や文字色を変更しています。

#nav	{
	margin:0 auto;
	text-align:center
}

#nav li {
	width:20%;
    display:inline-block;
    /display:inline;
	/zoom:1;
	vertical-align:middle;
}

#nav li a	{
	display:block;
	width:100%;
	color:#000;
	text-decoration:none;
	padding:5px 0
	background:#fff;
	border:1px solid #ccc;
}

#nav li a:hover	{
	color:#fff;
	background:#dd0000;
}

#nav li a.active	{
	color:#fff;
	background:#dd0000;
}

#nav {

margin:0 auto;

text-align:center

}

#nav li {

width:20%;

display:inline-block;

/display:inline;

/zoom:1;

vertical-align:middle;

}

#nav li a {

display:block;

width:100%;

color:#000;

text-decoration:none;

padding:5px 0

background:#fff;

border:1px solid #ccc;

}

#nav li a:hover {

color:#fff;

background:#dd0000;

}

#nav li a.active {

color:#fff;

background:#dd0000;

}

HTMLの記述例

最後にHTMLファイルのサンプルです。

<ul id="nav">
    <li><a href="index.html">トップページ</a></li>
    <li><a href="company.html">会社概要</a></li>
    <li><a href="service.html">製品紹介</a></li>
    <li><a href="work.html">導入事例</a></li>
    <li><a href="contact.html">お問い合わせ</a></li>
</ul>