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元素提供与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视图中

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

Answer 2

假设您没有采取任何措施来改变链接的触发方式（使用ajax加载内容），您可以将链接的href与当前网址进行比较，以确定哪个链接应该处于活动状态。

$('.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的格式与它在网址中的显示方式相同（相对于绝对值）。

如何在jQuery的每个链接点击更改活动类？

2 个答案: