如何在jQuery中单击每个链接时更改活动类

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

本文关键字：链接 活动 jQuery 单击      更新时间：2023-09-26

我有一个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>

主.js

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

示例视图：

@{
    ViewBag.Title = "Services";
}
@{
    ViewBag.Title = "Contact";
}

以下脚本将添加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";  
}

假设您没有做任何事情来改变链接的触发方式（使用 ajax 加载内容），您可以将链接的 href 与当前 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 中的显示方式相同（相对与绝对）。

相关文章：