How to add/remove active class to menu item in jQuery ?
We can add/remove active class while click on menu item in jQuery. Here is the example of html, css & jquery code.
<!-- html starts -->
<ul class="navbar vertical__menu">
<li>
<a class="vertical__navbar-link active" href="#">navbar item 1</a>
</li>
<li>
<a class="vertical__navbar-link" href="#">navbar item 2</a>
</li>
<li>
<a class="vertical__navbar-link" href="#">navbar item 3</a>
</li>
</ul>
<style>
.navbar .navbar-link {
color: blue
}
.navbar .navbar-link.active {
color: red
}
</style>
<!-- google jquery cdn link -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('.vertical__navbar-link').click(function () {
$('.vertical__navbar-link').removeClass("active");
$(this).addClass("active");
});
});
</script>
<!-- html end -->