Come evidenziare la voce di menu attiva nella barra di navigazione dopo il nuovo caricamento della pagina

Question

Il menu di barra di navigazione Bootstrap 3 viene definito utilizzando il codice seguente. Se la voce è selezionata dal menu, la nuova pagina viene caricata dal server. Lo stesso menu di bootstrap appare in ogni pagina. Tuttavia il menu a discesa che non viene utilizzato per selezionare il menu, non è evidenziato.

Come forzare bootstrat a higlight ultima voce di menu selezionata automaticamente se è consentita l'archiviazione locale: memorizzare l'ultimo elemento selezionato nella memoria locale. Se viene caricata una nuova pagina, ottieni l'ultimo nome della voce di menu cliccato e evidenziala aggiungendo la classe active al suo interno.

Presetelo nel server reqiures cambiando il menu generato aggiungendo la classe attiva all'opzione corretta in modo dinamico. Come implementare questo senza tale cambiamento? ASP.NET MVC4 viene utilizzato sul lato server. Forse jquery + localstorage nel browser o qualche semplice soluzione ASP.NET MVC4 è disponibile.

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
    </div> 

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li class="dropdown"> 
      <a href='#' class="dropdown-toggle" data-toggle="dropdown">Dropdown 1</a> 
      <ul class="dropdown-menu" role="menu"> 
      <li><a href='somepage'>Action11</a></li> 
      <li><a href='somepage'>Action12</a></li> 
      <li><a href='somepage'>Action13</a></li> 
      </ul> 
     </li> 

     <li class="dropdown"> 
      <a class="dropdown-toggle" data-toggle="dropdown">Dropdown 2</a> 
      <ul class="dropdown-menu" role="menu"> 
      <li><a href='somepage'>Action121</a></li> 
      <li><a href='somepage'>Action122</a></li> 
      <li><a href='somepage'>Action123</a></li> 
      </ul> 
     </li> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav> 

Aggiornamento

Menu contiene menù a discesa con parametri di query come mostrato di seguito. In questo caso in codice nella risposta Alexander Solonik _str valore è # sempre e urlpath è sempre DoklstlG Quindi nulla è evidenziato. Come risolvere ?

<nav class="navbar navbar-default navbar-static-top"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     </div> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav" id="menu"> 
       <li class='dropdown'> 
<a href='#' class='dropdown-toggle' data-toggle='dropdown' role='button'>Pad1 
</a> 
<ul class='dropdown-menu' role='menu'> 

<li><a href='/admin/?_user=admin&_company=1'>Bar1</a></li><li><a id='menu_DoklstlG' tabindex='-1' entity='DoklstlG' href='/admin/Grid/Index/DoklstlG?_user=admin&_company=1' title='Ctrl+E'>Option1</a></li> 

<li><a id='menu_DoklstlO' tabindex='-1' entity='DoklstlO' href='/admin/Grid/Index/DoklstlO?_user=admin&_company=1'>Ostuarve</a> 

... 

Answer 1

Che cosa si può fare è impostare un valore di borsa vista l'azione richiesta. Dopo, fai una logica per chiedere quel valore quando costruisci il menu.

uso questo meccanismo ma utilizzando un ActionFilter e di utilizzarlo per le azioni o il controller di annotazione

Answer 2

bene ho avuto un problema simile e ha scritto il seguente script:

var _urlpath = $(location).attr('pathname').split('/').pop(); 

    $('#menu > li').each(function(){ 
     var _this = $(this); 
     var _str = _this.find('a').attr('href'); 
     _str !== _urlpath ? _this.removeClass('active') : _this.addClass('active'); 
    }); 

sua abbastanza semplice, filtrare l'url il nome del percorso, memorizzarlo in una variabile e, cosa più importante, quando viene caricata una nuova pagina, eseguire il ciclo di tutti i file e cercare di associare l'hash dell'URL (non conosco la terminologia esatta ... scusa) al, hash in li> a's.

Spero che questo aiuto. ahimè, potrebbe esserci un modo migliore per farlo.

P.S. potrebbe essere necessario modificare leggermente il codice.