Активный класс не применяется к определенным пунктам меню

Я чувствую себя идиотом, потому что я задал очень похожий вопрос ранее сегодня, но теперь, когда я решил применить его снова, я столкнулся с аналогичной проблемой.

Я работаю с шаблоном блога, используя PHP для загрузки элементов страницы из базы данных. Вот встроенное меню и .active стиль, основанный на моем PHP:

<div role="navigation" id="menu">
<div class="page-menu">
<ul>
<li class="list-item"><a href="/anchor/posts" title="Posts">Posts</a></li>
<li class="list-item"><a href="/anchor/demo-page-3" title="Demo Page 3">Demo Page 3</a></li>
<li class="list-item"><a href="/anchor/demo-page-4" title="Demo Page 4">Demo Page 4</a></li>
<li class="list-item"><a href="/anchor/demo" title="demo page">demo</a></li>
</ul>
</div>

<style>
.active {background-color: #0d597e; }
</style>

Вот мой сценарий:

$(document).ready(function(){
var current = location.pathname;
$('.page-menu li a').each(function(){
var $this = $(this);
if($(this).attr('href').indexOf(current) !== -1){
$this.addClass('active');
}
})
})

Теперь я знаю, что это работает, потому что в «Записи» добавлен активный класс, ни одна из других страниц не делает, когда на них нажимают.

Страница поста получает активный класс, никто другой не делает при нажатии

Я также проверил с alert(location.pathname) и все вернулись правильно. Куда я иду не так? Я дергаю себя за волосы, пытаясь разобраться в этом.

JSFIDDLE

2

Решение

У вас есть ошибка в консоли на demo-page-3 и demo-page-4 на видео, которую вы не видите на странице сообщений. ‘Uncaught type error — Невозможно прочитать свойство’ replace ‘из неопределенного. Эта ошибка JS остановит дальнейшую работу JS, и ваша функция меню не будет вызвана. Исправьте эту ошибку, и ваше меню будет работать.

2

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]