カレント付与 パターンA
// カレント付与 共通js ※URL完全一致
//=====================================================
$(function(){
$('.js--current li a').filter(function(){return $(this).prop('href')==location.href}).parent().addClass('current');
});
カレント付与 パターンB
// カレント付与 共通js ※こっちはURLが下層でも親のURLにカレント付与
//=====================================================
$(function(){
var pageURL = location.pathname,
pageURLArr = pageURL.split('/'), //パスを分割して配列化する
pageURLArrCategory = pageURLArr[1]; //パスから第1階層を取得
$('.js--current2 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) {
console.log('カレント付与');
$(this).parent().addClass('current');
}
});
});
https://attadesign.co.jp/blog/745/
コメントを残す