How to Add Active Class to navbar

How do I add “active class” to the menu item with jQuery that links to the page on which the visitor or user is.

It depends on the version of the forum you're asking for, but the typical way of checking is a clean URI against a clean href attribute.

Here's an example that should work on most default forum versions.

Code:

$(function() {
  var cleanURI = window.location.href.replace(/\?.*|#.*/, ''), // get the clean URL without queries or hashes
      menu = $('a.mainmenu'), // get menu items
      i = 0, // set index
      j = menu.length; // cache menu length

  // loop menu links
  for (; i < j; i++) {
    // clean the href and compare it with the window location
    if (menu[i].href.replace(/\?.*|#.*/, '') == cleanURI) {
      menu[i].className += ' activeNav'; // add a new class
      break; // break out of the loop because we found our match
    }
  }
});

Then you can style the navigation link with CSS :

Code:

a.mainmenu.activeNav {
  background:#39C;
}

Thanks this works perfect

No problem.

Topic archived

Have a nice day. ^^