ホームページのユーザビリティを高めるために、現在表示しているページへのリンクにクラス名を追加する方法です。
意外に簡単でした。
たとえば以下のようなソースがあったとします。
<ul>
<li><a href="http://aaa.html">AAA</a></li>
<li><a href="http://bbb.html">BBB</a></li>
<li><a href="http://ccc.html">CCC</a></li>
<li><a href="http://ddd.html">DDD</a></li>
</ul>
現在AAAというページを表示しているときに、リンクメニューの中の今自分がいる場所へのリンクをハイライトさせたい場合に、jQueryを使って、リンクタグに class="current"とい値を自動的に追加する方法です。
<li><a href="http://aaa.html" class="current">AAA</a></li> ← というようにしたい
以下のスクリプトを</head>の手前に記述します。
<script src="http://www.google.com/jsapi"></script>
<script>google.load("jquery", "1.7");</script>
<script>
$(function(){
$('a[href="' + window.location + '"]').addClass('current');
});
</script>
後はスタイルシートで修飾、文字色などを設定します
ul li a.current,{
text-decoration: underline;
}
参考にさせていただいたサイトはこちら