Проблема с подсветкой активного пункта меню ajax-сайта при клике по ссылке. Проблема была решена, но осталось чувство, что её можно было решить и более изящно (или, возможно, задачу вообще надо было формулировать иначе). Обращаюсь за советом.
Итак, сайт состоит из нескольких меню и тела. В это тело после клика по ссылке (меню или любой другой ссылке, расположенной где угодно на сайте) подгружается страница (посредством ajax, разумеется). Обработчик клика по ссылке назначается всем ссылкам и с меню персонально никак не связан (использую jQuery):
$( 'body' ).on( 'click', 'a', linkClickHandler );
Меню каким-то образом должно определить, что клик был совершён именно по его элементу. Первоначальное и логичное решение: просто повесить дополнительные обработчики клика на элементы меню, но этот вариант не подходит, т.к. на страницу, которая упомянута в меню, может быть осуществлён переход не только по самой ссылке меню, но и по любой произвольной ссылке, расположенной где угодно, и в этом случае (хотя клик по меню совершён и не был) оно всё равно должно догадаться подсветить соответствующий элемент. Я создал событие "Изменение адреса в браузерной строке" и назначил объекты меню слушателями этого события. Для изменения адреса всегда использую одну функцию:
app.changeLocation = function( locationAddress ) {
history.replaceState( null, locationAddress, locationAddress );
$( 'body' ).trigger( 'locationChange', locationAddress );
};
Когда адрес меняется, меню сравнивают свои ссылки с новым адресом и при совпадении подсвечивают соответствующий пункт. Это окончательное решение, и именно оно всё же представляется странным: при клике на пункт меню, оно на самом деле не сразу подсвечивает соответствующий пункт (хотя визуально так кажется), а вначале проверяет, как изменился адрес, потом просматривает аж все свои элементы и только в конце выделяет подходящий. Ничего лучше, однако, я пока не придумал.
Ещё одна проблема, которую решает выбранный вариант и которую надо учитывать - проблема снятия выделения. У меня два меню, вертикальное слева и горизонтальное сверху. При клике на пункт меню сверху, если был выделен пункт левого меню, выделение последнего должно быть снято. Если делать меню, которые выделяют ссылки через простые обработчики клика, то им пришлось бы знать о существовании друг друга, чтобы иметь возможность снять выделение соседа.
Я уверен, что вы решали аналогичную задачу, либо знаете какое-либо традиционное и лучшее её решение, либо, наконец, можете подтвердить, что это решение подходящее. Буду очень рад ответам!
