I'm looking to create a dynamic side menu that changes class on click event.
My goal is to have jQuery add a class to a clicked "li" element that doesn't already have the class "active", while removing the class from other "li" elements. I want to achieve this using Html.ActionLink exclusively.
<div id="sidebar">
<ul class="nav nav-pills nav-stacked">
<li>
@Html.ActionLink("Home", "Index", "Home", new { @class = "ach" })
</li>
<li>
@Html.ActionLink("About Us", "About", "Home", new { @class = "ach" })
</li>
<li>
@Html.ActionLink("Contact Us", "Contact", "Home", new { @class = "ach" })
</li>
</ul>
Here is the JavaScript code I used:
$('.ach').on('click', function () {
debugger;
$('li').removeClass('active');
$(this).parent().addClass('active');
});