页面重新加载后，在导航栏中保留选定的项目

Question

如何保留选定/活动的导航栏项目，以便在页面重新加载后可以重新选择它？

我正在使用bootstrap，但我认为这不是特别相关。我相信我想要将所选项目存储在点击上，然后在页面上加载重新选择该项目。但我该怎么做？我所看到的大多数都是基于该项目的href参数，但在某些地方我使用ActionLink。

为了使它复杂化，我也有三个导航栏（如果你喜欢，菜单，子菜单和子菜单），所以我想保留每个选择的项目（并设置一个默认项目。选择和菜单项，它会自动选择默认的（第一个）项目在它的子菜单

<nav class="navbar navbar-inverse fixed-top"> 
    <div class="container-fluid"> 
     <ul class="nav navbar-nav"> 
      <li><a href="/Controller1/Index/">Menu Item 1</a>)</li> 
      <li><a href="/Controller2/Index/">Menu Item 2</a>)</li> 
      <li><a href="/Controller3/Index/">Menu Item 3</a>)</li> 
     </ul> 
    </div> 
</nav> 

if (IsSectionDefined("SubMenu")) 
{ 
    <nav class="navbar navbar-inverse fixed-top"> 
     <div class="container-fluid"> 
      <ul class="nav navbar-nav"> 
       @RenderSection("SubMenu") 
      </ul> 
     </div> 
    </nav> 
} 

if (IsSectionDefined("SubSubMenu")) 
{ 
    <nav class="navbar navbar-inverse fixed-top"> 
     <div class="container-fluid"> 
      <ul class="nav navbar-nav"> 
       @RenderSection("SubSubMenu") 
      </ul> 
     </div> 
    </nav> 
} 

<script> 
    $(document).ready(function (e) { 
     $(".navbar li a").click(function() { 
      $(".navbar li a").removeClass("selected"); 
      $(this).addClass("selected"); 
     }); 
    }); 
</script> 

子菜单的一个例子是：

@section SubMenu { 
    <li><a href="/SubMenu1/">SubMenu Item 1</a>)</li> 
    <li><a href="/SubMenu2/">SubMenu Item 2</a>)</li> 
    <li><a href="/SubMenu3/">SubMenu Item 3</a>)</li> 
} 

@section SubSubMenu { 
    <li><a href="/SubSubMenu1/">SubSubMenu Item 1</a>)</li> 
    <li><a href="/SubSubMenu2/">SubSubMenu Item 2</a>)</li> 
    <li><a href="/SubSubMenu3/">SubSubMenu Item 3</a>)</li> 
} 

Answer 1

尝试下面的代码和让我知道它是否也不适合你 -

$(document).ready(function() { 
     $(".navbar li a").click(function() { 
      var id = $(this).attr("id"); 

      $('#' + id).siblings().find(".active").removeClass("active"); 
      $('#' + id).addClass("active"); 
      localStorage.setItem("selectedolditem", id); 
     }); 

     var selectedolditem = localStorage.getItem('selectedolditem'); 

     if (selectedolditem != null) { 
      $('#' + selectedolditem).siblings().find(".active").removeClass("active"); 
      $('#' + selectedolditem).addClass("active"); 
     } 
    });