現在位置表示を自動で設定させるためのJS（jquery使用）

現在表示してるファイル名とリンク先が同じだった場合のみ「active」のclassをliに追加させる。
後から修正が多いめんどくさいクライアント用。

HTML

	
01.html
	
02.html
	
03.html
	
04.html
	
05.html

navigationLoad();

ローカルナビなど、使いたい場所を制限したい場合は↑でロードさせる。全ページで使う時はファンクションは不要

JS

function navigationLoad(){
	
	$(function(){
		var nav = $("#nav li");
		var url = location.href;
		url = url.substring(url.lastIndexOf("/")+1,url.length);	
		$.each(nav,function(i){
			var link_url = $(nav).eq(i).children("a").attr("href");
			link_url = link_url.substring(link_url.lastIndexOf("/")+1,link_url.length);			
			if(url == link_url){			
				$(nav).eq(i).addClass("active");				
			}
		});
	});
}

リスト内のリンク先と現在表示されてるファイル名を比較して同じ場合はliのclassに「active」を追加。

ファイル名とリンクが先違うけど別の現在位置表示をさせたい場合は↓をループ内に追加してリンク先を上書き。

if(url == "bbb.html"){url = "aaa.php"}

CSS

#nav li.active a{color:#006655;font-weight:bold;}

active用のCSSを設定。

以上。

jQuery

• 
• Tweet