jQuery addClass example

Change class name on click in jQuery

by Lalji Tadhani

HTML

<ul class="nav justify-content-center ">
                <li class="nav-item active main-menu">
                  <a class="nav-link" href="#">Mango</a>
                  <div class="msg"><p class="position">You selected Mango</p></div>
                </li>                 
                <li class="nav-item main-menu">
                  <a class="nav-link" href="#">Banana</a>
                  <div class="msg"><p class="position">You selected Banana</p></div>
                </li>
                <li class="nav-item main-menu">
                  <a class="nav-link " href="#">Grapes</a>
                  <div class="msg"><p class="position">You selected Grapes</p></div>
                </li>
                </ul>

CSS

.msg{
  display:none;
}
.active .msg{
  display:block;
}

JavaScript

$(".nav li").on("click",function(){
           $(".nav li, .nav li a").removeClass("active");
           $(this).addClass("active");
           })