如何在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>

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类

$('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元素的相同布局立即重定向到另一个页面（新视图不知道您在此页面上的操作）。

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

<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

假设您没有采取任何措施来改变链接的触发方式（使用ajax加载内容），则可以将链接的href与当前URL进行比较，以找出应该激活的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;
  }
});

您需要做的就是确保链接href的格式设置与在URL中显示的格式相同（相对或绝对）。