簡単！ヘッダーナビ等、現在アクセス中のページリンクにマウスオン効果をかける方法

どうもこんばんは。今回のtipsは【ヘッダーナビ等、現在アクセス中のページリンクをマウスオン状態にする方法】に関してです。かなり簡単に実装できますのでお試しいただければ幸いです。（2013年10月1日更新：jQueryで少し短めにしました)

絶対パスでの指定

コードもシンプルです。リンク内のURLと現在アクセス中のページのURLが一致したいる場合のみ【ON】というクラスを追加しています。リンクのつなげ方によって記述も変わってきますので、絶対パスでのハイライト方法と2種類のJSを用意しています。

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を取得し、次に/最後のテキストを取得します。この取得したテキストの内容に応じてクラスをつけています。

以上になります。