Front-end. Как добавить класс active в ваше меню используя URL?

941

Часто на сайте который имеет несколько разделов (подразделов) нужно в меню накинуть класс (после чего стилизовать его), дабы пользователь мог определить где он находиться (UX/UI). Это легко можно достигнуть написав пару строк в цикле на бэке, но что если мы решили обработать эту задачу на фронте? Сделать это можно очень быстро и просто. Если вам это интересно то прочтите эту статью.

Пример кода навигации


<nav>
	<ul>
		<li><a href=«/«>Главная</a></li>
		<li><a href=«/clients/«>Каталог товаров</a></li>
		<li><a href=«/about/«>О компании</a></li>
	</ul>
</nav>

Структура готова. Теперь на JS мы напишем код который будет обрабатывать url и в зависимости в каком разделе мы находимся добавлять класс active к пункту меню


$('nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');

Вот и весь нужный код. Мы ссылаемся на объект браузера location и вытаскиваем у него url путь к подразделу с помощью свойства pathname, после чего мы обрезаем полученную строку получая первое его значение которое находиться между слешер / .

Надеюсь этот код будет вам полезен и вы можете легко использовать его в своиз проектах.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *