【jQuery】グローバルメニューの現在地にクラスを追加設定する方法(絶対パスの場合)

グローバルメニューなど、現在表示しているページのリンクにスタイルシートのクラスを追加し、
現在開いているページであることを分かりやすくしたいことは多いと思います。

今回は、テンプレートなどでグローバルメニューが共通の場合に、jQueryで現在のメニューにクラス「on」を付ける方法をメモしておきます。

$(function(){
	var url = window.location;
		$('#mainNav a[href="'+url+'"]').addClass('on');
});

現在のページが「サービス(http://xxxxxxxxx/service/)」の場合、以下のようなソースになります。

<nav id="mainNav">
			<ul id="gNav">
				<li class="gNav01"><a href="http://xxxxxxxxx/about/">会社概要</a></li>
				<li class="gNav02"><a href="http://xxxxxxxxx/service/" class="on">サービス</a></li>
				<li class="gNav03"><a href="http://xxxxxxxxx/contact/">お問い合わせ</a></li>
			</ul>
</nav>

コメント

タイトルとURLをコピーしました