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

Question

I have an MVC app, where in the _Layout.cshtml file I have something like this:

<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>

So the point is that when the website starts, the first link is set to active, then after each link click I want to set that one's class to active. I guess I need to write some jQuery code, but I cannot seem to figure out the answer.

UPDATE:

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

Example views:

@{
    ViewBag.Title = "Services";
}

@{
    ViewBag.Title = "Contact";
}

Answer 1

The following script will add the 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');
})

however, since your clicking on a link you don't even see it because you immediately redirect to another page using the same layout where the active class applied to the first li element (the new view has no knowledge of what you did on this page).

Since you seem to be wanting to highlight the li element relating to the current page, one option would be to give your li elements an id attribute matching the ViewBag.Title property and use that to apply the 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>

and the script

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

Then in the Index.cshtml view,

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

Answer 2

Assuming you aren't doing anything to alter the way the links fire (loading content with ajax), you can compare the href of the links to the current url to figure out which one should be active.

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

All you'll need is to make sure the link href is formatted the same way it will appear in the url (relative vs absolute).