The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

How to Add Active Class to navbar

2 posters

Go down

Solved How to Add Active Class to navbar

Post by Mati September 21st 2015, 9:59 am

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


Last edited by Mati on September 21st 2015, 11:53 am; edited 1 time in total
Mati
Mati
Active Poster

Posts : 1934
Reputation : 333
Language : HTML, CSS & JavaScript
Location : Forum Services

https://fm-focus.forumotion.com/

Back to top Go down

Solved Re: How to Add Active Class to navbar

Post by Ange Tuteur September 21st 2015, 11:25 am

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;
}
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to Add Active Class to navbar

Post by Mati September 21st 2015, 11:55 am

Thanks this works perfect Smile
Mati
Mati
Active Poster

Posts : 1934
Reputation : 333
Language : HTML, CSS & JavaScript
Location : Forum Services

https://fm-focus.forumotion.com/

Back to top Go down

Solved Re: How to Add Active Class to navbar

Post by Ange Tuteur September 21st 2015, 11:57 am

No problem. Smile

Topic archived

Have a nice day. ^^
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum