Question

I have “navigation.html” (static coded navigtaion ) file loaded on multiple pages, using jQuery .load()
Now I need to dynamically set active <li> for each page user clicking on. I can not use body id for specific reasons.
Any other ways to do this?

Answer 1

If you can identify your current page by class or id (ex: body > div#contacts) for contacts.html and this class/id is unique then you have to match it with you navigation, other way is to match window.location.href value (parsed if you want) against your navigation.

changeActiveLink is defined in JS (ex:init.js) file which you include to each page

function changeActiveLink() {
  var currentLocation = window.location.href;
  currentLocation = currentLocation.replace('//', '/').split('/');
  var page = currentLocation[currentLocation.length - 1];

  if (page == "") { page = 'index.html'; }

  $('#leftNav1 a[href*="'+ page +'"]').addClass('active');
}

This line is called from each file when “init.js” is included.

$('#leftNav1').load('navigation.html', changeActiveLink);