JAVASCRIPT

add active class and remove active class by click

/*
Here are some HTML codes looks like
<ul class="navbar-nav m-auto mb-2 pb-lg-0 main_menu">
              <li class="nav-item position-relative me-5">
                <a class="nav-link active" aria-current="page" href="#">Home</a>
              </li>
              <li class="nav-item me-5">
                <a class="nav-link" href="#">About</a>
              </li>
              <li class="nav-item me-5">
                <a class="nav-link" href="#">Elements</a>
              </li>
              <li class="nav-item me-5">
                <a class="nav-link" href="#">Blogs</a>
              </li>
              <li class="nav-item me-5">
                <a class="nav-link" href="#">Portfolio</a>
              </li>
              <li class="nav-item me-5">
                <a class="nav-link" href="#">Contact</a>
              </li>
              
            </ul>
*/

// Here are javascript code looks like
const links = document.querySelectorAll(".nav-link");

links.forEach((link)=> {
    link.addEventListener("click", function(){
        links.forEach((e)=> {e.classList.remove('active')})
        this.classList.add('active')
    })
})

add and remove active class

links.forEach((link)=> {
 	 /*
  		*important may you face an problem that's becuase the arow function
 		doesn't work here.
        --so dont use arow function--
 	*/
    link.addEventListener('click', function(){
        links.forEach((e)=> {e.classList.remove('active')})
        this.classList.add('active')
    })
}) 

Add and remove active class

const ul_li = document.querySelectorAll('.list-item');
function add_and_remove_active_class() {
  //for in will not work with DOM elements  
  for (const elem of ul_li) {
      elem.addEventListener('click' , ()=>{
        for (const lis of ul_li) {
          lis.classList.remove('active-item');
        }
        elem.classList.add('active-item');
      });
    }
}
add_and_remove_active_class();