Add active class on click to menu item at same time remove active class from sibling element through jquery

This script can be use to add the “active” class to the menu item which has been clicked, also simultaneously “active” class removed from the sibling link when other menu items clicked. This feature helps you to design your active menu as per your requirement.

Below is the HTML, CSS, and JQUERY for this work.

HTML:

<ul class=”navmenu”>
<li><a href=”#”>Link 1</a></li>
<li><a href=”#”>Link 2</a></li>
<li><a href=”#”>Link 3</a></li>
</ul>

CSS:

.navmenu {
display: flex;
justify-content: space-between;
}

.navmenu li{
list-style: none;
}
.navmenu li.active a{
color: green;
}

JQuery:

jQuery(“.navmenu ul”).on(‘click’,’li’,function(){
   jQuery(this).addClass(“active”).siblings().removeClass(“active”);
});

Check fiddle link for DEMO

https://jsfiddle.net/maverickabhi/caqu5sf0/5/