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

この記事は4年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

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

以上になります。