title: MVC 5 Razor Active Navigation Tab
body: <p>I have been trying to highlight the Active navigation tab on my project. I was tasked on updating an older website without changing to bootstrap(which is where my experience is). I found an example that had most of what I needed. Right now the only Tab that has the "selected class" is the Home tab. When I click on another tab the Home tab is no longer highlighted but the current tab is not. When I inspect the element the Home tab still has the "selected class" attribute. Not sure what to do. </p>
  
  <p>_Layout</p>
  
  <pre><code>        &lt;ul id="navigation"&gt;
              &lt;li class="@Html.ActivePage("Home", "Index")"&gt;@Html.ActionLink("Home", "Index", "Home")&lt;/li&gt;
              &lt;li class="@Html.ActivePage("About", "About")"&gt;@Html.ActionLink("About", "About", "Home")&lt;/li&gt;
              &lt;li class="@Html.ActivePage("Products", "Products")"&gt;@Html.ActionLink("Products", "Products", "Home")&lt;/li&gt;
              &lt;li class="@Html.ActivePage("Services", "Services")"&gt;@Html.ActionLink("Services", "Services", "Home")&lt;/li&gt;
              &lt;li class="@Html.ActivePage("Contact", "Contact")"&gt;@Html.ActionLink("Contact", "Contact", "Home")&lt;/li&gt;
          &lt;/ul&gt;
  </code></pre>
  
  <p>HtmlHelper Class</p>
  
  <pre><code>public static class HtmlHelperExtensions
  {
      public static string ActivePage(this HtmlHelper helper, string controller, string action)
      {
          string classValue = "";
  
          string currentController = helper.ViewContext.Controller.ValueProvider.GetValue("controller").RawValue.ToString();
          string currentAction = helper.ViewContext.Controller.ValueProvider.GetValue("action").RawValue.ToString();
  
          if (currentController == controller &amp;&amp; currentAction == action)
          {
              classValue = "selected";
          }
  
          return classValue;
      }
  }
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>ul#navigation li {
      list-style: none;
      float: left;
      position: relative;
      background: url(../images/mi-standby.gif) no-repeat left top;
      padding-left: 3px;
      margin-left: 6px;
  }
  
  ul#navigation a {
      float: left;
      display: block;
      background: url(../images/mi-standby.gif) no-repeat right top;
      padding: 10px 29px 6px 26px;
      text-decoration: none;
      font-weight: bold;
      font-size: .8em;
      color: #a6a6a6;
  }
  
  ul#navigation li.selected a {
      background: url(../images/mi-active.gif) no-repeat right top;
      color: #FFF;
  }
  
  ul#navigation li.selected {
      background: url(../images/mi-active.gif) no-repeat left top;
      color: #FFF;
  }
  
  ul#navigation li a:active {
      background-color: #ff0000;
      text-decoration: none;
      color: #ffffff;
  }
  </code></pre>