我想制作一个侧面菜单，并在点击时更改课程

Question

我想制作侧边菜单，点击时更改课程。

当我点击没有class =“active”的“li”时，我希望jquery在空

上添加一个类，并从othes“li”中删除它。我只想使用Html.ActionLink。

<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');
});

Answer 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');   

});