現在開いているページのナビゲーションにだけ、“今このページを見てるよ”ということを示すため、別のスタイルを付けることがよくあります。私は“ ステイ ” と呼んでいます。
私はこれを、「ステイを付ける」とか「ステイをかける」とか言いますが、正式な名称はあるのでしょうか。
今回は呼び方の問題ではなく、その設定をする方法についてです。
よくある方法は、ナビゲーションに付けたclassと<body>に付けたclassを比較し、一致していればそのナビゲーションにだけスタイルをかける方法です。
しかし、ナビゲーションが大量にある場合、1つ1つにclassを付けるのも手間ですよね。
そこで、ナビゲーションのhrefと現在のurlを比較して、一致していればスタイルを付ける、ということができれば、htmlには必要最低限の記述で実現できるのではないかと考えました。
まずはCSSでステイ時のナビゲーションのclassを作っておく
例えば、ナビゲーションのhtmlは下記の様なリストだとします。
<ul class="gnavi_list">
<li><a href="/news">NEWS</a></li>
<li><a href="/gallery">GALLERY</a></li>
<li><a href="/about">ABOUT</a></li>
<li><a href="/contact">NEWS</a></li>
</ul>そして、以下の様なCSSを設定しておけば、現在のページのナビの<li>にclass=”now_here”が付けばいいということになります。
classが付けられたナビだけ、背景が黒で文字が白くなるようにしています。
/*urlとhrefが一致している場合*/
ul.gnavi_list li.now_here{
background-color:#000000;
}
ul.gnavi_list li.now_here a{
color: #fff;
}JavaScriptでURLとhrefの比較をし、classを付与する
まずは、現在表示されているページのURL(パス)を取得します。以下の記述でpathという変数に代入します。
var path = location.pathname;次に、ナビゲーションのリストを取得し、全ての<li>に対して、『<a>に設定したhrefの値と、先ほどのpathとを比較し、pathにhrefの値が含まれていれば、その<li>にclass=”now_here”を付ける』という指示を書きます。
var thelist = $("ul.gnavi_inner_list li");
thelist.each(function(){
var link = $(this).find('a').attr('href');
if(path.indexOf(link) > -1){
$(this).addClass("now_here");
}
});ここでポイントとなるのが、path.indexOf(link) > -1 という記述です。
indexOfメソッドの詳細な使い方は割愛しますが、今回の書き方の場合、引数の文字列が含まれている場合には0以上の値を返します。含まれていない場合は-1を返します。
そのため、 path.indexOf(link) > -1と書けば、『URLの中にhrefの値が含まれている場合』というif文になります。
そして、.addClassメソッドで<li>にclass=”now_here”を与えるだけです。
まとめとして
JavaScriptの全文としては以下のようになります。
//↓現在ページのURL(パス)を取得
var path = location.pathname;
//↓ナビゲーションのリスト要素を取得
var thelist = $("ul.gnavi_inner_list li");
//↓全てのナビゲーションに対してこれを実行
thelist.each(function(){
//ナビゲーションの中の<a>のhrefの値を取得
var link = $(this).find('a').attr('href');
//pathの中にhrefの値が含まれていればclassを付与
if(path.indexOf(link) > -1){
$(this).addClass("now_here");
}
});この方法が使える状況は限られていると思います。複雑なURLやパラメータを使っている場合などは使えないかもしれません。
状況に応じて色々な方法があると思いますが、手打ちでhtmlを書いていて、なおかつページ数が多い場合など(あまりない状況ですが)使えると思います。