title: Retain selected item in navbar after page reload
body: <p>How do you retain the selected/active navbar item so it can be reselected after a page reload?</p>
  
  <p>I'm using bootstrap but I don't think that is particaulrly relevant. I believe I'm wanting to store the selected item on the click then on the page load reselect that item. But how do I do that? Most of what I have seen is based on the href argument of the item, but in some places I use ActionLink.</p>
  
  <p>To complicate it I also have three navbars (a menu, sub-menu and sub-sub-menu if you like) so I want to retain the selected item in each one (and set a default item. Similarly if I select and item in the menu, it should automatically select the default (first) item in it's sub-menu.</p>
  
  <pre><code>&lt;nav class="navbar navbar-inverse fixed-top"&gt;
      &lt;div class="container-fluid"&gt;
          &lt;ul class="nav navbar-nav"&gt;
              &lt;li&gt;&lt;a href="/Controller1/Index/"&gt;Menu Item 1&lt;/a&gt;)&lt;/li&gt;
              &lt;li&gt;&lt;a href="/Controller2/Index/"&gt;Menu Item 2&lt;/a&gt;)&lt;/li&gt;
              &lt;li&gt;&lt;a href="/Controller3/Index/"&gt;Menu Item 3&lt;/a&gt;)&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  
  if (IsSectionDefined("SubMenu"))
  {
      &lt;nav class="navbar navbar-inverse fixed-top"&gt;
          &lt;div class="container-fluid"&gt;
              &lt;ul class="nav navbar-nav"&gt;
                  @RenderSection("SubMenu")
              &lt;/ul&gt;
         &lt;/div&gt;
      &lt;/nav&gt;
  }
  
  if (IsSectionDefined("SubSubMenu"))
  {
      &lt;nav class="navbar navbar-inverse fixed-top"&gt;
          &lt;div class="container-fluid"&gt;
              &lt;ul class="nav navbar-nav"&gt;
                  @RenderSection("SubSubMenu")
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
  }
  
  &lt;script&gt;
      $(document).ready(function (e) {
          $(".navbar li a").click(function () {
              $(".navbar li a").removeClass("selected");
              $(this).addClass("selected");
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>An example of the sub menus would be:</p>
  
  <pre><code>@section SubMenu {
      &lt;li&gt;&lt;a href="/SubMenu1/"&gt;SubMenu Item 1&lt;/a&gt;)&lt;/li&gt;
      &lt;li&gt;&lt;a href="/SubMenu2/"&gt;SubMenu Item 2&lt;/a&gt;)&lt;/li&gt;
      &lt;li&gt;&lt;a href="/SubMenu3/"&gt;SubMenu Item 3&lt;/a&gt;)&lt;/li&gt;
  }
  
  @section SubSubMenu {
      &lt;li&gt;&lt;a href="/SubSubMenu1/"&gt;SubSubMenu Item 1&lt;/a&gt;)&lt;/li&gt;
      &lt;li&gt;&lt;a href="/SubSubMenu2/"&gt;SubSubMenu Item 2&lt;/a&gt;)&lt;/li&gt;
      &lt;li&gt;&lt;a href="/SubSubMenu3/"&gt;SubSubMenu Item 3&lt;/a&gt;)&lt;/li&gt;
  }
  </code></pre>