Выделить активный пункт меню — jQuery

Выделить активный пункт меню — jQuery

Достаточно часто сталкиваюсь с такой ситуацией, что нужно легким и быстрым способом сделать выделение активного пункта меню, в зависимости от страницы нахождения. То есть - если находимся в блоге /blog/, то подчеркнуть или подсветить ссылку в меню Блог. Естественно никаких готовых инструментов под рукой нет. Тут на помощь в этом вопросе нам приходит javascript, а именно писать будем на jQuery. Итак...

Для того, чтобы выделить активный пункт меню воспользуемся старым проверенным способом - просто назначим класс нужному пункту. Но как определить, какой пункт меню нужный? Очень просто. Мы будем сравнивать url страницы со ссылкой, на которую ведет каждый пункт меню. Как только найдено совпадение - класс будет назначаться. Полный код решения:

jQuery(document).ready(function($) {
	var url=document.location.href;
	$.each($("#menu a"),function(){
		if(this.href==url){
			$(this).addClass('active');
		}
	});
})(jQuery);

Вот и все. Всем успехов!

26.03.17
Для просмотра сайта обновите браузер.