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

【问题标题】：How to use jquery add remove class in mvc3 action link?如何在 mvc3 操作链接中使用 jquery 添加删除类？
【发布时间】：2012-07-04 04:45:40
【问题描述】：

我正在尝试使用 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");
           });
       });

谢谢，

【问题讨论】：

这应该可以，你确定 jquery 加载正确吗？

标签： jquery asp.net asp.net-mvc-3

【解决方案1】：

Html.ActionLink 返回一个超链接，让浏览器加载一个新页面。 除非您阻止链接加载下一页，否则 JavaScript 将无法在这种情况下工作。好吧，它会工作片刻，然后浏览器将显示新页面。

登录有效。
用户点击注册。
由于您的 JavaScript，注册已激活。
浏览器加载注册页面。
登录再次处于活动状态。

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

【讨论】：

@Hexxagonal- 感谢您的回复。与上面列出的完全相同。如何在 Razor 模板中解决此问题？
这是一个比较棘手的问题，因为许多命名路由可以解析为 Login 或 Register。我建议在 ViewData 或您的模型中指定活动的内容。
@user10489 您需要自己创建超链接，然后在单击处理程序中的事件参数上执行preventDefault()。您的点击处理程序当前未传入事件参数。

【解决方案2】：

试试这个

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

【讨论】：

【解决方案3】：

试试event.stopPropagation():

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

【讨论】：