如何使用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");
   });
});