How do you add active class to a navigation menu based on URL?

How do you add active class to a navigation menu based on URL?

JS

1. jQuery(function($) {
2. var path = window. location. href;
3. // because the ‘href’ property of the DOM element is the absolute path.
4. $(‘ul a’). each(function() {
5. if (this. href === path) {
6. $(this). addClass(‘active’);
7. }

How do I make a button active when clicked?

Snippet 1 (Vanilla JavaScript)

1. document. getElementById(“myDiv”)
2. . addEventListener(“click”, function() {
3. if (this. classList. contains(“active”)) {
4. this. classList. remove(“active”);
5. } else this. classList. add(“active”);
6. });

How do you keep active CSS style after click a button?

For starters, create a CSS class that you’re going to apply to the active element, name it ie: “. activeItem”. Then, put a javascript function to each of your navigation buttons’ onclick event which is going to add “activeItem” class to the one activated, and remove from the others…

How to keep your links active in CSS?

If you want to keep your links to look like they are :active class, you should define :visited class same as :active so if you have a links in .example then you do something like this: The Link visited Pseudo Class is used to select visited links as says the name.

When to use hover or active selector in CSS?

Tip: Use the :link selector to style links to unvisited pages, the :visited selector to style links to visited pages, and the :hover selector to style links when you mouse over them. Note: :active MUST come after :hover (if present) in the CSS definition in order to be effective!

How to add active menu item in JavaScript?

I am using jQuery. First I have taken all the menu texts, and performed some string functions to make the texts lowercase and replace spaces with hyphens so it matches the class name. Now, if the content class have the same class as menu text (lowercase and without spaces), add active class to the menu item.

What does the active state mean in CSS?

The CSS :active state means the active state of the clicked link – the moment when you clicked on it, but not released the mouse button yet, for example. It doesn’t know which page you’re on and can’t apply any styles to the menu items. To fix your problem you have to create a class and add it manually to the current page’s menu: