Как добавить активный класс в навигационную ссылку через Pug или JS

Я не могу получить активный класс для своих навигационных ссылок в зависимости от того, какой URL-адрес в данный момент активен.

У меня был наставник, который помог мне написать этот код, и он работал:

if filename.replace('.pug', '.html').indexOf(pageLink) > 0
 a.active-nav-link= pageName
else
 a(href=pageLink)= pageName

но я вернулся к проекту, и теперь есть ошибка компиляции с кодом, и когда я меняю блок только на a(href=pageLink)= pageName, он успешно компилируется, но класс .active-nav-link явно исчез.

ul.reveal
 each pageLink, pageName in navLink
  li
   block pages
     a(href=pageLink)= pageName

Как мне заставить класс .active-nav-link применяться к текущей странице, как это было раньше. Возможно, приведенный выше код устарел и нуждается в настройке. Я готов попробовать другие простые подходы, так как я не слишком продвинут.


javascript pug
person Michael Lawinger    schedule 25.04.2019    source источник
comment
Вы упомянули ошибку компилятора. Пожалуйста, расскажите нам, что он сказал.   -  person Benjamin Davies    schedule 25.04.2019
comment
@JackBashford, но я вернулся к проекту и обнаружил ошибку компиляции...   -  person Benjamin Davies    schedule 25.04.2019
comment
Я должен был добавить, что я использую Prepros для компиляции, и я получаю сообщение об ошибке «Не могу прочитать «заменить» из неопределенного». Итак, у вас есть идеи, может это мой компилятор или это изменение, которое мы могли бы внести в код?   -  person Michael Lawinger    schedule 25.04.2019

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете использовать выражения JS в качестве значений атрибутов в файле pug. Попробуй это:

a(
    href=pageLink
    class=(filename.replace('.pug', '.html').indexOf(pageLink) > 0 ? 'active-nav-link' : '')
)= pageName
person Emilio Venegas    schedule 25.04.2019
comment
Я попробовал код, но мой компилятор выдает сообщение об ошибке выше от моего компилятора. - person Michael Lawinger; 25.04.2019
comment
Я протестировал код, и у меня не было проблем, так что это похоже на проблему с вашим компилятором, а не с мопсом. Попробуйте найти ошибку, которую вы получаете, в Google или в репозитории GitHub используемого вами компилятора. - person Emilio Venegas; 26.04.2019
comment
Хорошо. Посмотрю документацию, спасибо за помощь! - person Michael Lawinger; 26.04.2019
comment
Спасибо, ребята, код сработал, я просто сменил компилятор, и он скомпилировался без проблем. Еще раз спасибо, я пытался решить эту проблему в течение нескольких недель! - person Michael Lawinger; 29.04.2019