知ってた?ナルホド! BLOG

2019.06.10

現在ページのカレント表示機能

WRITTEN BY

 | 

HIRAHARA NATSUMI

現在ページのカレント表示機能

こんにちは!コーダーの平原です!

Webサイトのグローバルナビゲーションなどで、現在ページのカレント表示をしているサイトをよく見ますよね。
このカレント表示の機能の作り方は色々あり、参考サイトも数多くあるのですが、作りたい仕様が実現できないプログラムだったりします。

そこで今回は、案件でよく使用する現在ページのカレント表示をする為のjQueryのプログラムをご紹介します。

  1. 仕様説明
  2. 現在地のカレント表示機能
  3. location.pathname
  4. split
  5. まとめ

1. 仕様説明

今回作成した、現在ページのカレント表示の仕様をご説明します。

現在ページのURLのパス名の第1階層と、href属性の第1階層の値を比較し、同じ値であればカレント表示がされるという仕様になっています。

動作する条件は以下の通りです。
ナビゲーションのa要素に指定した、href属性の値が相対パス、又はルート相対パスであること。

/sample/ //ルート相対パス

第2階層がある場合は、第1階層のディレクトリに該当するナビゲーションにカレントを付けること。

/sample/sample01/ //第2階層
/sample/ //第1階層のディレクトリ

2. 現在ページのカレント表示機能

こちらが1の仕様で作成した、現在地のカレント表示機能のプログラムです。

$(function(){

  var pageURL = location.pathname,
  pageURLArr = pageURL.split('/'), //パスを分割して配列化する
  pageURLArrCategory = pageURLArr[1]; //パスから第1階層を取得

  $('.gnav > ul > li > a').each(function (i, v) {
    var selfhref = $(v).attr('href'),
      hrefArr = selfhref.split('/'), //href属性の値を分割して配列化する
      hrefArrCategory = hrefArr[1]; //href属性の第1階層を取得

    //パスの第1階層とhref属性の第1階層を比較して同じ値であればcurrentを付与する
    if (pageURLArrCategory === hrefArrCategory) {
      $(v).addClass('current');
    }

  });

});

3. location.pathname

locationオブジェクトのpathnameプロパティでは、現在ページのパス名を参照します。取得したパス名は変更することもでき、それによりページ遷移をさせることもできます。

locationオブジェクトには、pathnameプロパティの他にも多数のプロパティがあり、URL全体や、ホスト名、アンカーなどを取得することも可能です。

4. split

splitは引数に指定した文字列で、文字列を分割して配列として返すメソッドです。
今回の場合は、取得したパスを「/」で分割して、配列から第1階層に該当する文字列を取得しています。

splitメソッドはその他にも、改行コードで分割したり、取得する個数を制限したりすることもできます。

5. まとめ

現在ページのカレント表示機能の実装は、どのような仕様を実現したいかによって変化します。href属性のパスの指定方法や、グローバルナビゲーションに表示する階層、そして実際にあるページの階層の深さなどを理解した上で、その仕様に合った機能である必要があります。
使用頻度の高い機能の為、使い回してしまいそうになりますが、実装漏れにならない為にもサイトの仕様をきちんと理解することが大切ですね。

PAGE TOP