如何使用 jquery 在 mvc3 操作链接中添加删除类

Question

我正在尝试使用 jquery 的东西为所选菜单添加类。我尝试了以下方法，它不起作用。

我的代码是

<div class="paragraph">
   <ul class="tablinkss">
        <li class="active">@Html.ActionLink("Login", "LogOn")</li>
        <li>@Html.ActionLink("Register", "Register")</li>
   </ul>
</div>

还有我的jquery

$(function () {
           $('ul.tablinkss li').click(function () {
               $('ul.tablinkss li').removeClass("active");
               $(this).addClass("active");
           });
       });

谢谢

Answer 1

Html.ActionLink返回一个超链接，该超链接将使浏览器加载新页面。 JavaScript 在这种情况下不起作用，除非您阻止链接加载下一页。 好吧，它将在一瞬间工作，然后浏览器将显示新页面。

1. 登录处于活动状态。
2. 用户单击"注册"。
3. 由于您的 JavaScript，注册变得活跃。
4. 浏览器加载注册页面。
5. 登录再次处于活动状态。

您需要在 Razor 模板中修复此问题，而不是在 JavaScript 中修复此问题。

Answer 2

试试这个

  $('ul.tablinkss li').on('click',function () {
           $('ul.tablinkss li').removeClass("active");
           $(this).addClass("active");
  });

Answer 3

尝试event.stopPropagation()：

$(function () {
   $('ul.tablinkss li').click(function(e) {
       e.stopPropagation()
       $('ul.tablinkss li').removeClass("active");
       $(this).addClass("active");
   });
});