I have created with navbar, I haven't done much web development.

<nav class="navbar navbar-custom navbar-light navbar-expand-md justify-content-center">
  <button class="navbar-toggler ml-1" type="button" data-toggle="collapse" data-target="#collapsingNavbar2"> <span class="navbar-toggler-icon"></span> </button>
  <div class="navbar-collapse collapse justify-content-between align-items-center w-100" id="collapsingNavbar2">
    <ul class="navbar-nav mx-auto text-center">
      <li class="nav-item"><a class="nav-link" href="index.html"><strong style="text-transform:uppercase">home</strong></a></li>
      <li class="nav-item"><a class="nav-link" href="about.html"><strong style="text-transform:uppercase">about</strong></a></li>
      <li class="nav-item"><a class="nav-link" href="flights.html"><strong>FLIGHTS</strong></a></li>
      <li class="nav-item"><a class="nav-link" href="hotels.html"><strong>HOTELS</strong></a></li>
      <li class="nav-item"><a class="nav-link" href="holidays.html"><strong>HOLIDAYS</strong></a></li>
      <li class="nav-item "><a class="nav-link" href="property.html"><strong>PROPERTY</strong></a></li>
      <li class="nav-item active"><a class="nav-link" href="car_hire.html"><strong>CAR HIRE</strong></a></li>
    </ul>
  </div>
</nav>

This navbar is linked to at the top of all other pages to reduce repetition of code. Can someone help me with code so when menu item clicked "active" class is added to li element. This then triggers css.

CSS:

.nav-link.active {
  color: white;
}

Thank you

I have created with navbar, I haven't done much web development.

<nav class="navbar navbar-custom navbar-light navbar-expand-md justify-content-center">
  <button class="navbar-toggler ml-1" type="button" data-toggle="collapse" data-target="#collapsingNavbar2"> <span class="navbar-toggler-icon"></span> </button>
  <div class="navbar-collapse collapse justify-content-between align-items-center w-100" id="collapsingNavbar2">
    <ul class="navbar-nav mx-auto text-center">
      <li class="nav-item"><a class="nav-link" href="index.html"><strong style="text-transform:uppercase">home</strong></a></li>
      <li class="nav-item"><a class="nav-link" href="about.html"><strong style="text-transform:uppercase">about</strong></a></li>
      <li class="nav-item"><a class="nav-link" href="flights.html"><strong>FLIGHTS</strong></a></li>
      <li class="nav-item"><a class="nav-link" href="hotels.html"><strong>HOTELS</strong></a></li>
      <li class="nav-item"><a class="nav-link" href="holidays.html"><strong>HOLIDAYS</strong></a></li>
      <li class="nav-item "><a class="nav-link" href="property.html"><strong>PROPERTY</strong></a></li>
      <li class="nav-item active"><a class="nav-link" href="car_hire.html"><strong>CAR HIRE</strong></a></li>
    </ul>
  </div>
</nav>

This navbar is linked to at the top of all other pages to reduce repetition of code. Can someone help me with code so when menu item clicked "active" class is added to li element. This then triggers css.

CSS:

.nav-link.active {
  color: white;
}

Thank you

• javascript
• html
• css
• html-lists
• navbar

• You can use JavaScript/jQuery to add class to that element – AR. Arif Commented Apr 28, 2022 at 21:21
• There's also a pseudo-class named 'active' (see: :active selector). Although the pseudo class names begin with : as opposed to ., you might want to consider naming it something else to prevent confusion. – Alicia Sykes Commented Apr 28, 2022 at 21:43

7 Answers 7

All you have to do is loop through the links, check if the current clicked link is the same as the current page, then set the active class and aria-current to that item. Add this code to your javascript

document.querySelectorAll(".nav-link").forEach((link) => {
    if (link.href === window.location.href) {
        link.classList.add("active");
        link.setAttribute("aria-current", "page");
    }
});

Here is the exact complete code for your requirement in pure JavaScript. Hope it will help

const links = document.querySelectorAll('.nav-link');
    
if (links.length) {
  links.forEach((link) => {
    link.addEventListener('click', (e) => {
      links.forEach((link) => {
          link.classList.remove('active');
      });
      e.preventDefault();
      link.classList.add('active');
    });
  });
}

.nav-link.active {
  color: white;
}

<nav class="navbar navbar-custom navbar-light navbar-expand-md justify-content-center">
  <button
      class="navbar-toggler ml-1"
      type="button"
      data-toggle="collapse"
      data-target="#collapsingNavbar2"
  >
    <span class="navbar-toggler-icon"></span>
  </button>
  <div
    class="navbar-collapse collapse justify-content-between align-items-center w-100"
    id="collapsingNavbar2"
  >
    <ul class="navbar-nav mx-auto text-center">
      <li class="nav-item">
        <a class="nav-link" href="index.html">
          <strong style="text-transform: uppercase">home</strong>
        </a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="about.html">
            <strong style="text-transform: uppercase">about</strong>
          </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="flights.html">
          <strong>FLIGHTS</strong>
        </a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="hotels.html">
            <strong>HOTELS</strong>
          </a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="holidays.html">
            <strong>HOLIDAYS</strong>
          </a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="property.html">
            <strong>PROPERTY</strong>
          </a>
      </li>
      <li class="nav-item active">
          <a class="nav-link" href="car_hire.html">
            <strong>CAR HIRE</strong>
          </a>
      </li>
    </ul>
  </div>
</nav>

Use classList

document.querySelectorAll(".nav-item").forEach((ele) =>
  ele.addEventListener("click", function (event) {
    event.preventDefault();
    document
      .querySelectorAll(".nav-item")
      .forEach((ele) => ele.classList.remove("active"));
    this.classList.add("active")
  })
);

.active {
  color: green;
}

    <ul class="navbar-nav mx-auto text-center">
      <li class="nav-item"><a class="nav-link" ><strong style="text-transform:uppercase">home</strong></a></li>
      <li class="nav-item"><a class="nav-link" ><strong style="text-transform:uppercase">about</strong></a></li>
      <li class="nav-item"><a class="nav-link" ><strong>FLIGHTS</strong></a></li>
      <li class="nav-item"><a class="nav-link" ><strong>HOTELS</strong></a></li>
      <li class="nav-item"><a class="nav-link" ><strong>HOLIDAYS</strong></a></li>
      <li class="nav-item "><a class="nav-link" ><strong>PROPERTY</strong></a></li>
      <li class="nav-item active"><a class="nav-link" ><strong>CAR HIRE</strong></a></li>
    </ul>

Note: To use this each of your links need to have an id which need be be named the same as you page without the .html. For example if your page is named "index.html" then your link's id need to be "index".

//active nav bar

//getting the link
const fullLink = window.location.pathname;
//isolating the page name
const activeLink = fullLink.split('/').pop().replace('.html', '');
//passing the page name through the function
function setActiveClass(elementId) {
    //getting the element that has the id of the page name
    const element = document.getElementById(elementId);
    //checking if the element is valid
    if (element) {
        //adding class active to the element
        element.classList.add('active');
    }
}
//function getting called when page refresh of change of page and passing through the page name
setActiveClass(activeLink);

Using the code of synthesizecode further down, a full example of highlighting the selected nav.menu in vanilla js with 3 menu entries:

#test.html:
 <div id=div1></div>

 <script>
 
 for (var elem of ['index', "contact", 'imprint']) {
    var aref = document.createElement("a");
    aref.href = `${elem}.html`;
    aref.textContent = elem[0].toUpperCase() + elem.slice(1)
    document.getElementById('div1').append(aref)
    aref.style.padding='10px'
    aref.id = elem
}
const element = document.getElementById(window.location.pathname.split('/').pop().replace('.html', ''));
if (element) element.classList.add('active');
</script>

I need the final line with if because on the landingpage, there might be no element.

You can set the active state based on the current URL path. This will ensure the active path persists its active property after page navigation.

document.addEventListener("DOMContentLoaded", () => {
   const links = document.querySelectorAll(".navlink");
   
   // sets active link based on the current URL path.
   const setActiveLink = () => {
      
    links.forEach(link, () => {
        // checks if link's href matches the page's url
        link.getAttribute("href") === window.location.path ? 
        (
            link.classList.add("active"),
            link.setAttribute("aria-current", "page")
        ) : 
        (
            link.classList.remove("active"),
            link.removeAttribute("aria-current")
        )
        });
    };
   
   // calls setActiveLink on page load
   setActiveLink();
   
   //updates active state on click.
   links.forEach(link, () => {
      link.addEventListener("click", () => {
        setActiveLink();
      });
   });

 });

Add following code in your JS:

 $(".nav-item").click(function() {  
    $(".nav-item").removeClass("active"); // This will remove active classes from all <li> tags
    $(this).addClass("active"); // This will add active class in clicked <li>   
  });