Привет всем!

В очередной раз тренируюсь с full-ajax. На этот раз понадобилось сделать меню, в котором активные пункты будут переключаться не только при нажатии на само меню (это то сделать не сложно), а при переходе по любой внутренней ссылке.

Например, у меня есть список всех рассказов в базе, каждый пункт этого списка является ссылкой на страницу редактирования этого рассказа. При нажатии на ссылку, через ajax подгружается содержимое страницы, а меню остается неизменным. Соответственно, мне нужно как-то найти в меню пункты, у которых содержимое href подходит под адрес текущей страницы (window.location.href при ajax-переходе изменяется). Мой вариант работает, но очень криво — он помимо нужного пункта, выделяет и ссылку «домой» (код ниже). Это понятно, ибо адрес корневой страницы в любом случае содержится в адресе любой страницы. Вопрос в том, как это исправить?

Мне единственное, что пока приходит в голову, это приделать всем нужным ссылкам событие onclick с вызовом функции обновления меню с передачей туда пункта, который нужно сделать активным после клика. Но, на мой взгляд, это не красиво, хочется чего-нибудь универсального.

Код моего нынешнего кривого решения:

$("a[data-ajax]").live("click", function(event) {
	var location = window.location.href;
	var list = $("#sidebar").find("li a");
	var old = $("#sidebar").find("li.active");

	$.each(list, function(i, val) {
		var href = $(val).attr('href');
		var reg = new RegExp(href+"(.*)", 'iU');

		if(location.match(reg)) {
			if(!$(val).parent().hasClass("active")) {
				$(val).parent().addClass("active");
				old.removeClass("active");
			}
		}
	});
});

Вот так выглядит меню:

<li><a data-ajax="true" href="/backend">Домой</a></li>
<li class="divider"><span></span></li>
<li><a data-ajax="true" href="/backend/edit/list">Все рассказы</a></li>
<li><a data-ajax="true" href="/backend/edit/tale">Добавить рассказ</a></li>
<li class="active"><a data-ajax="true" href="/backend/edit/chapter">Написать главу</a></li>

_____________
Блог | VK | GitHub | Twitch