add active class on open page using javascript with code examples

When building a website with multiple pages, it is often useful to indicate to the user which page they are currently on by adding an "active" class to the corresponding navigation link. This can be done with JavaScript by targeting the current page's URL and adding the class to the appropriate link element.

Here is an example of how this can be accomplished:

// Get all of the nav links on the page
const navLinks = document.querySelectorAll('.nav-link');

// Get the current page's URL
const currentUrl = window.location.href;

// Loop through each nav link
navLinks.forEach(link => {
  // If the link's href matches the current page's URL, add the active class
  if (link.href === currentUrl) {
    link.classList.add('active');
  }
});

In this example, we first select all elements with the class "nav-link" using querySelectorAll. These are the navigation links that we will be adding the active class to. Next, we get the current page's URL using window.location.href. Finally, we use the forEach method to loop through each nav link and check if the link's href matches the current page's URL. If it does, we add the active class to the link using the classList.add method.

It's also possible to accomplish this by using document.querySelector() method and check the pathname property of window.location object.

const navLink = document.querySelector(`a[href='${window.location.pathname}']`);
navLink.classList.add('active');

It's also possible to use location.pathname instead of location.href if you want to compare only path part of URL, not the whole URL.

It's important to note that the above code should be placed inside a function and should be called on page load. You can use addEventListener method to call the function on load event of the window object.

window.addEventListener("load", function(){
  // add your code here
});

It's also possible to use other libraries like jQuery, to accomplish the same thing using a shorter syntax. Here is an example using jQuery:

$(document).ready(function() {
  // Get the current page's URL
  var currentUrl = window.location.pathname;

  // Add the active class to the corresponding nav link
  $('.nav-link[href="' + currentUrl + '"]').addClass('active');
});

In this example, we use the $(document).ready function to ensure that the code runs after the page has finished loading. Then we use the $('.nav-link[href="' + currentUrl + '"]') selector to select the navigation link with the href matching the current page's URL and we add the active class to it using the addClass method.

In conclusion, adding an active class to the current page's navigation link is a simple task that can be accomplished using JavaScript or jQuery. By using the techniques outlined above, you can create a more engaging and user-friendly experience for your website's visitors.

One common issue when adding an active class to navigation links is that the active class does not change when navigating to a subpage. For example, if the user is on the "about" page, the "about" link in the navigation will have the active class, but when the user navigates to a subpage such as "about/team", the active class will still be on the "about" link.

To fix this issue, we can use the startsWith() method to check if the current page's URL starts with the link's href. Here is an example:

navLinks.forEach(link => {
  // Check if the current page's URL starts with the link's href
  if (currentUrl.startsWith(link.href)) {
    link.classList.add('active');
  } else {
    link.classList.remove('active');
  }
});

In this example, we use the startsWith() method to check if the current page's URL starts with the link's href. If it does, we add the active class to the link using the classList.add method.
It's also important to remove the active class from the other links, so we add classList.remove('active') to remove the class when the condition is not true.

Another approach to solve this is by using the location.pathname property to compare the path of the current URL with the path of the link href. This way we can check if the path of the current URL starts with the path of the link href:

navLinks.forEach(link => {
  if (location.pathname.startsWith(link.pathname)) {
    link.classList.add('active');
  } else {
    link.classList.remove('active');
  }
});

Another topic worth mentioning is that when working with the active class in the navigation, it's important to keep in mind that the active class should be removed from all links before adding it to the current page link. This can be done by using the classList.remove method to remove the active class from all links before adding it to the current page link.

navLinks.forEach(link => {
  link.classList.remove('active');
  if (link.href === currentUrl) {
    link.classList.add('active');
  }
});

In this example, we use the forEach method to loop through each nav link and remove the active class using the classList.remove method. Then we check if the link's href matches the current page's URL and if it does, we add the active class to the link using the classList.add method.

It's also worth mentioning that you can use CSS to style the active class, for example:

.nav-link.active {
  color: blue;
  font-weight: bold;
}

By using these techniques and considering the adjacent topics, you can create a more engaging and user-friendly experience for your website's visitors by highlighting the current page on the navigation.

Popular questions

1. How can I add an active class to the current page's navigation link using JavaScript?
   Answer: You can accomplish this by targeting the current page's URL and adding the class to the appropriate link element. An example of this can be done by getting all of the nav links on the page with const navLinks = document.querySelectorAll('.nav-link');, getting the current page's URL with const currentUrl = window.location.href; and then using a loop to check if the link's href matches the current page's URL. If it does, you can add the active class to the link using the link.classList.add('active'); method.

2. Why is the active class not changing when navigating to a subpage?
   Answer: This is because the code only checks if the current page's URL exactly matches the link's href and does not take into account subpages. To fix this issue, you can use the startsWith() method to check if the current page's URL starts with the link's href.

3. How can I remove the active class from all links before adding it to the current page link?
   Answer: You can accomplish this by using the classList.remove method to remove the active class from all links before adding it to the current page link. This can be done by using the forEach method to loop through each nav link and removing the active class using the link.classList.remove('active'); method.

4. How can I use CSS to style the active class in my navigation?
   Answer: You can use CSS to style the active class by targeting the class in your CSS stylesheet. For example, .nav-link.active { color: blue; font-weight: bold;} will change the color of the text and make it bold when the active class is added to the link.

5. Can I use jQuery to add an active class to the current page's navigation link?
   Answer: Yes, you can use jQuery to accomplish the same task using a shorter syntax. You can use the $(document).ready function to ensure that the code runs after the page has finished loading, then you can use the $('.nav-link[href="' + currentUrl + '"]') selector to select the navigation link with the href matching the current page's URL and add the active class to it using the .addClass('active') method.

Tag

Navigation.