如何在每次 link 单击 jQuery 时更改活动 class？

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>

所以重点是，当网站启动时，第一个 link 设置为活动，然后在每次 link 单击后我想将那个 class 设置为活动。我想我需要写一些 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>

main.js

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

示例视图：

@{
    ViewBag.Title = "Services";
}

@{
    ViewBag.Title = "Contact";
}

Answer 1

以下脚本将添加 active class

$('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');
})

但是，由于您点击了 link，您甚至看不到它，因为您立即重定向到使用相同布局的另一个页面，其中 active class 应用于第一个 li 元素（新视图不知道您在此页面上做了什么）。

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

<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 视图中，

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

Answer 2

假设您没有做任何改变 links 触发的方式（使用 ajax 加载内容），您可以将 links 的 href 与current url 以确定应该激活哪个。

$('.navbar-nav ul').children().each(function() {
  var link = $(this).find('a'); // or var link = $(this).children('a');
  if (link.attr('href') == location.href) {
    $(link).addClass('active');
    return false;
  }
});

您只需要确保 link href 的格式与它在 url 中的显示方式相同（相对与绝对）。

如何在每次 link 单击 jQuery 时更改活动 class？

How to change active class at each link click in jQuery?

javascript

asp.net-mvc

jquery