Ruby on Rails evidenzia il link corrente sulla barra di navigazione?

Qualcuno può dirmi come evidenziare (con il colore) il collegamento corrente su una barra di navigazione, usando css? Non voglio usare l'opzione controller. Ecco il codice da shared/menu.html.erb:Ruby on Rails evidenzia il link corrente sulla barra di navigazione?

<div id = "navigation"> 

    <ul> 

    <li id="menu"><%=link_to "Menu", menus_path, :class => "menunav"%></li> 
<li id="drink"><%=link_to " Drinks", drinks_path, :class => "drinknav"%> </li> 

</ul> 

</div>

fonte

2011-09-25 blawzoo

Non è del tutto chiaro per me quello che vuoi. Con 'link corrente 'intendi il collegamento che punta alla pagina corrente? E cosa intendi con 'opzione controller '? La soluzione normale che propongo è di adattare il tuo 'link_to' e aggiungere una classe' current' quando punta alla pagina corrente. – nathanvda

Ci sono alcuni approcci per questo, ma se siete dopo una semplice, mi suggeriscono di aggiungere una classe al vostro corpo.

<body class="<%= params[:controller] %>_controller"> 
    ... 
</body>

Quindi nel tuo css puoi fare quanto segue.

body.menus_controller #navigation a.menunav, 
body.drinks_controller #navigation a.drinknav { 
    background-color : yellow 
    color : blue 
}

Questo può complicarsi se si dispone di più pagine si desidera dividere, ma per questo esempio di base dovrebbe essere ok.

fonte

2011-09-25 22:08:32

Qualcosa di simile funzionerebbe per voi. Ovviamente dovresti modificarlo per i tuoi scopi, magari diventare più sofisticato con la corrispondenza (attualmente questo corrisponderebbe solo ai percorsi, come nel tuo esempio).

$("#navigation a[href="+window.location.pathname+"]") 
    .closest('li') 
    .css('background-color', '#ff0');

Meglio ancora, si sarebbe definire una classe "corrente" da qualche parte, quindi è sufficiente aggiungerlo:

/* in some stylesheet */ 
#navigation li.current { background-color: #ff0; } 

/* then the js */ 
$("#navigation a[href="+window.location.pathname+"]") 
    .closest('li') 
    .addClass('current');

fonte

2011-09-25 22:15:43 numbers1311407

Il primo approccio è quello di gestire corrente controller_name e action_name per rilevare che pagina che stai visitando. È buono, ma aggiunge un po 'di lato server al modello specifico del client. L'helper delle guide utilizza in questo modo link_to_unless_current. Utilizzo minimo di JS. Vedere un esempio here

Il secondo è analizzare $ (posizione) e aggiungere direttamente una determinata classe alla voce di navigazione selezionata per evidenziarla.

Il terzo (dipende da un oggetto) consiste nel creare un oggetto JS con lo stato corrente di entità e aggiungere metodi per aggiungere una classe a un nav attivo. Quindi puoi creare un'istanza di questa classe JS, passare l'oggetto e mantenere la logica incapsulata.

fonte

2011-09-26 00:24:19 Anatoly

Ti suggerisco di non mischiare i layer di finectionality JS, prova a tenerli divisi – Anatoly

Ruby on Rails evidenzia il link corrente sulla barra di navigazione?

risposta

Problemi correlati