頁面重新加載後，在導航欄中保留選定的項目

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