Add active class to navbar element when clicked-CodePudding

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

<nav >
  <button  type="button" data-toggle="collapse" data-target="#collapsingNavbar2"> <span ></span> </button>
  <div  id="collapsingNavbar2">
    <ul >
      <li ><a  href="index.html"><strong style="text-transform:uppercase">home</strong></a></li>
      <li ><a  href="about.html"><strong style="text-transform:uppercase">about</strong></a></li>
      <li ><a  href="flights.html"><strong>FLIGHTS</strong></a></li>
      <li ><a  href="hotels.html"><strong>HOTELS</strong></a></li>
      <li ><a  href="holidays.html"><strong>HOLIDAYS</strong></a></li>
      <li ><a  href="property.html"><strong>PROPERTY</strong></a></li>
      <li ><a  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

CodePudding user response：

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 >
  <button
      
      type="button"
      data-toggle="collapse"
      data-target="#collapsingNavbar2"
  >
    <span ></span>
  </button>
  <div
    
    id="collapsingNavbar2"
  >
    <ul >
      <li >
        <a  href="index.html">
          <strong style="text-transform: uppercase">home</strong>
        </a>
      </li>
      <li >
          <a  href="about.html">
            <strong style="text-transform: uppercase">about</strong>
          </a>
      </li>
      <li >
        <a  href="flights.html">
          <strong>FLIGHTS</strong>
        </a>
      </li>
      <li >
          <a  href="hotels.html">
            <strong>HOTELS</strong>
          </a>
      </li>
      <li >
          <a  href="holidays.html">
            <strong>HOLIDAYS</strong>
          </a>
      </li>
      <li >
          <a  href="property.html">
            <strong>PROPERTY</strong>
          </a>
      </li>
      <li >
          <a  href="car_hire.html">
            <strong>CAR HIRE</strong>
          </a>
      </li>
    </ul>
  </div>
</nav>

CodePudding user response：

Use classList and toggle

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 >
      <li ><a  ><strong style="text-transform:uppercase">home</strong></a></li>
      <li ><a  ><strong style="text-transform:uppercase">about</strong></a></li>
      <li ><a  ><strong>FLIGHTS</strong></a></li>
      <li ><a  ><strong>HOTELS</strong></a></li>
      <li ><a  ><strong>HOLIDAYS</strong></a></li>
      <li ><a  ><strong>PROPERTY</strong></a></li>
      <li ><a  ><strong>CAR HIRE</strong></a></li>
    </ul>

CodePudding user response：

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>   
  });