title: How to keep the active menu item highlighted when visiting pages in ASP.Net MVC 5 application?
body: <p>So, I have one ASP.Net MVC 5 application. In that one of page hasfour menu items. When page loads first menu item is selected by default (so it should be highlighted as soon as the page loads). And now as soon as user clicks on any other menu, that other menu should be in highlighted stage, so that user knows which menu he is currently on. Below is my attempt:</p>
  
  <p><strong>My thinking:</strong> </p>
  
  <p>a. add a click event on the ul tag.</p>
  
  <p>b. when clicked find "active" class inside ul tag and remove it.</p>
  
  <p>c. now add active class to the source of click event (which means the li tag on which user clicked).</p>
  
  <p><strong>Issue:</strong> </p>
  
  <blockquote>
    <p>The selected/clicked menu gets highlighted for a second, and then
    automatically first menu gets highlighted. So as soon as the whole
    page corresponding to the newly clicked menu item reloads the first
    menu item gets highlighted back.</p>
  </blockquote>
  
  <p><strong>My Attempt</strong></p>
  
  <p>P.S: This is a partial View, And all redirects will load this partial view <strong>afresh</strong>.</p>
  
  <pre><code>@if (Request.IsAuthenticated)
  {
      &lt;ul style="list-style-type:none;"&gt;
          &lt;li class="active setBtnMargin"&gt;
              &lt;a href="@Url.Action("Index", "Resume")" class="btn btn-block"&gt;My Resume &lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="setBtnMargin"&gt;
              &lt;a href="@Url.Action("Index", "CoverLetter")" class="btn btn-block"&gt;My Cover Letter &lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="setBtnMargin"&gt;
              &lt;a href="@Url.Action("Index", "Home")" class="btn btn-block"&gt;My Account &lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="setBtnMargin"&gt;
              &lt;a href="@Url.Action("Index", "Home")" class="btn  btn-block"&gt;Get Rewards &lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  }
  
  &lt;script&gt;
  // ATTEMPT 1
      $("ul").on("click", "li", function () {
          $('ul li').removeAttr('active');
          $(this).addClass('active');
      });
  
  // ATTEMPT 2
      //$("li").click(function () {
      //    //$("ul li").removeClass("active");
      //    $(this).addClass("active");
      //});
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>EDIT 1</strong></p>
  
  <p>So the problem is as the page gets redirected. The active tag again gets appened to the first menu item when entire DOM gets reloaded <strong>because all the landing pages use the same partial view</strong>.</p>