我想制作一个侧面菜单，并在单击 [重复] 时更改类

Posted 2023-03-06

【中文标题】我想制作一个侧面菜单，并在单击 [重复] 时更改类

【英文标题】：I want to make a side menu, and change the class while clicking [duplicate]

【发布时间】：2017-12-04 01:14:36

【问题描述】：

我想做一个侧边菜单，点击时改变类。

当我点击没有 class="active" 的“li”时，我希望 jquery 在空白处添加一个类

并将其从其他“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');
);

【问题讨论】：

当你点击链接时，你会被重定向到另一个页面——在当前视图中设置类是没有意义的（你已经离开了）

但我有侧边菜单作为所有页面的布局。即使重定向到其他页面，侧边菜单也会出现。我希望此类更改发生在侧菜单上。

是的，我知道 - 但您已离开当前页面 - 您需要在您重定向到的页面中设置类，而不是当前页面！

好的，我明白你的意思，所以你能建议我解决这个问题吗？

阅读副本

【参考方案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');   

);

【讨论】：

这正是 OP 当前代码正在做的事情。建议您阅读问题中的 cmets。

这个解决方案对我不起作用。