techronicle テクロニクル

Webサイト作成に関する情報提供サイトです。WordPress,HTML+CSSなど。

現在地にクラスを加えるには

2015/06/22 HTML+CSS

ナビゲーションで現在地の色を変えたいとき、WordPressでは、current-menu-itemやcurrent_page_itemというクラスを該当liに加えてくれるのでそれを利用して、CSSで設定すればいい。

WordPressなどのCMSを使わずに行う場合は、それぞれのページにクラスを設定するか、phpで共通のナビを設定する場合などは、javascriptを用いて現在地のクラスを設定することもできる。

その際には、以下のようなコードを使うといい。


$(function(){
var url = window.location;
$('header nav a[href="'+url+'"]').addClass('active');
});

ブラウザのurlウィンドウに表示されるアドレスとナビゲーションのアドレスが一致すれば現在地という判定である。

ナビゲーションの現在地は絶対パスで書いておく必要がある。

header navの部分は、環境に応じて変更する。