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

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