Ajax: лучшая практика для обновления меню CSS

Question

Мне нужны некоторые рекомендации / рекомендации по внедрению обновлений состояния меню после Ajax-обновления основного содержимого на моем веб-сайте.

Я изучаю Ajax и получил базовый сайт. Мои страницы имеют 3 раздела - голова, тело, нога. Только тело обновляется по запросу Ajax. У меня есть простое меню Bootstrap в голове, поэтому мне нужно вручную обновить его, когда в тело загружается новое содержимое страницы, чтобы показать вновь выбранную страницу. Я делаю это с помощью селектора jQuery, добавляя / удаляя активный класс ....

 // intercept main nav. menu links
 $(".nav a").click(function(e) { 
    var id = $(this).attr('id');
    var hr = $(this).attr('href');
    $('ul.nav li.active').removeClass('active');
    $('ul.nav li a#'+id).closest('li').addClass('active');      
    // update link colours
    $('ul.nav li a').css('color', '#9d9d9d');
    $('ul.nav li a#'+id).css('color', '#fff');

    sendRequest(id, hr); // post off my Ajax request
    history.pushState({ident:id, href: hr}, "", hr);

    return false;   // prevent default
  });   

У меня есть похожий код для перехвата кнопок браузера назад / вперед в window.addEventListener, чтобы создать общее ощущение приложения на моем сайте. Это работает, но я чувствую, что может быть лучший способ сделать это? Любые советы или комментарии приветствуются. Спасибо.