0

I want to make a side menu, and change the class when clicking.

When i click on the "li" with no class="active", i want the jquery to add a class on the empty

  • and remove it from the othes "li". and i want to use Html.ActionLink only. 
    <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>


        javascript which i used is:



 $('.ach').on('click', function () {
    debugger;
    $('li').removeClass('active');
    $(this).parent().addClass('active');
});
    • Chandan kr
    • 1
    • 1
    • 3
      When you click on the link, your redirected to another page - there is no point setting the class in the current view (you have already left it) –  Jun 30 '17 at 06:54
    • but i have side menu as layout for all the pages. side menu will be there even if redirects to other page. i want this class change to happen on side menu. – Chandan kr Jun 30 '17 at 07:30
    • Yes I know - but you have left the current page - you need to set the class in the the page your have redirect to, not the current one! –  Jun 30 '17 at 07:50
    • ok, i understand your point, so can you suggest me any work around to resolve this. – Chandan kr Jun 30 '17 at 10:27
    • Read the duplicate –  Jun 30 '17 at 11:09

    1 Answers1

    -1
    <div id="sidebar">
<ul class="nav nav-pills nav-stacked">
    <li>
        @Html.ActionLink("Home", "Index", "Home", new { @class = "ach",id="homeLink" })
    </li>
    <li>
         @Html.ActionLink("About Us", "About", "Home", new { @class = "ach",id="aboutUsLink" })
    </li>
    <li>
        @Html.ActionLink("Contact Us", "Contact", "Home", new { @class = "ach" ,id="contactUsLink"})
    </li>

</ul>

 $('.ach').on('click', function (event) {
    debugger;
    $('li').removeClass('active');
    var id = event.target.id;
    $('#'+id).addClass('active');   

});
    alfishan aqeel
    • 220
    • 2
    • 5