これはすごく便利。
絶対パスでの指定
CSS
#menu a{color: #777}
#menu a.on{color: #000}html
<ul id="menu" class="cf">
<li><a href="http://abc.com/index.html">home</a></li>
<li><a href="http://abc.com/page_sub1.html">sub1</a></li>
<li><a href="http://abc.com/page_sub2.html">sub2</a></li>
<li><a href="http://abc.com/page_sub3.html">sub3</a></li>
<li><a href="http://abc.com/page_sub4.html">sub4</a></li>
</ul>JS
$(function(){
var url = $(location).attr('href');
$('#menu').find('a').each(function(){
var link = $(this).attr('href');
if(link == url){
$(this).addClass('on');
}
});
});直接○○.htmlとしてしまうような場合には下記のようにJSを書き換えます。Aタグの中身で分岐して一つのコードにしても良いかと思います。
html
<ul id="menu" class="cf">
<li><a href="page_index.html">home</a></li>
<li><a href="page_sub1.html">sub1</a></li>
<li><a href="page_sub2.html">sub2</a></li>
<li><a href="page_sub3.html">sub3</a></li>
<li><a href="page_sub4.html">sub4</a></li>
</ul>JS
$(function(){
var url = $(location).attr('href');
var url_sp = url.split("/");
var file = url_sp[url_sp.length - 1];
$('#menu').find('a').each(function(){
var link = $(this).attr('href');
if(link == file){
$(this).addClass('on');
}
});
});現在アクセス中のURLを取得し、次に/最後のテキストを取得します。この取得したテキストの内容に応じてクラスをつけています。