javascript - 如何在 jQuery 中每次点击链接时更改事件类？

Question

我有一个 MVC 应用程序，在 _Layout.cshtml 文件中我有这样的内容:

<div class="collapse navbar-collapse">
    <ul class="nav pull-right navbar-nav">
        <li id="home" class="active"><a id="homeLink" href='@Url.Action("Index", "Home")'>Home</a></li>
        <li id="about"><a id="aboutLink" href='@Url.Action("About", "Home")'>About Us</a></li>
        <li><a href='@Url.Action("Services", "Home")'>Services</a></li>
        <li><a href=''>Blog</a></li>
        <li><a href='@Url.Action("Contact", "Home")'>Contact</a></li>
    </ul>
</div>

所以重点是，当网站启动时，第一个链接设置为事件状态，然后在每个链接单击后我想将该链接设置为事件状态。我想我需要编写一些 jQuery 代码，但我似乎无法找出答案。

更新:

<ul class="nav pull-right navbar-nav">
    <li id="Home" class="active"><a href='@Url.Action("Index", "Home")'>Home</a></li>
    <li id="About"><a href='@Url.Action("About", "Home")'>About Us</a></li>
    <li id="Services"><a href='@Url.Action("Services", "Home")'>Services</a></li>
    <li id="Blog"><a href=''>Blog</a></li>
    <li id="Contact"><a href='@Url.Action("Contact", "Home")'>Contact</a></li>
</ul>

ma​​in.js

$(function () {
    $('a').click(function () {
        $(this).closest('ul').find('li').removeClass('active');
        $('#' + '@ViewBag.Title').addClass('active');
    });
});

示例 View :

@{
    ViewBag.Title = "Services";
}

@{
    ViewBag.Title = "Contact";
}

Answer 1

以下脚本将添加active类

$('a').click(function(e) {
  // uncomment the following line to prove it
  // e.preventDefault();
  $(this).closest('ul').find('li').removeClass('active');
  $(this).closest('li').addClass('active');
})

但是，自从您单击链接后，您甚至看不到它，因为您立即重定向到使用相同布局的另一个页面，其中 active 类应用于第一个 li 元素(新 View 不知道您在此页面上做了什么)。

由于您似乎想要突出显示与当前页面相关的 li 元素，因此一种选择是为您的 li 元素提供 id 属性与 ViewBag.Title 属性匹配，并使用它来应用该类。

<div class="collapse navbar-collapse">
  <ul class="nav pull-right navbar-nav">
    <li id="home">@Html.ActionLink("Home", "Index", "Home")</li>
    <li id="about">@Html.ActionLink("About Us", "About", "Home")</li>
    <li id="services">@Html.ActionLink("Services", "Services", "Home")</li>
    ....
  </ul>
</div>

和脚本

$('#' + '@ViewBag.Title').addClass('active');

然后在 Index.cshtml View 中，

@{
  ViewBag.Title = "Home"; // or "About" for About.cshtml, "Services" for Services.cshtl etc.
  Layout = "~/Views/Shared_Layout.cshtml";  
}