4

Possuo um partial em Rails para carregar meu header em todas as paginas..

_header.html.erb:

<ul class="nav navbar-nav">
  <li><%= link_to "Home", root_path %></li>
  <li><%= link_to "Top Itens!", itens_path %></li>
    <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Mais! <b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li><%= link_to "Sobre", sobre_path %></li>
      <li><%= link_to "Privacidade", privacidade_path %></li>
      <li><%= link_to "Termos", termos_path %></li>
      <li><%= link_to "Contato", contato_path %></li>
    </ul>
  </li>
</ul>

JQuery:

$('.nav li').click(function() {
  $(this).siblings('li').removeClass('active');
  $(this).addClass('active');
});

O problema é que toda vez que a pagina é recarregada, os '.nav li' voltam sem a classe active. Como devo proceder?

2 Respostas 2

1

Se existe uma maneira de adicionar a classe via Ruby on Rails essa parece-me a via "mais limpa", e ai não tenho conhecimentos.

Porem pode usar-se o url para fazer o jQuery atribuir uma class ao li que tem um URL específico.

Exemplo:

var url = window.location.pathname.split("/");
var parteURL = url[url.length - 1] ? url[url.length - 1] : url[url.length - 2];

Este código vai atribuir à variável parteURL a ultima parte do url, depois da ultima /. Aí pode usar javascript (jQuery) para iterar todos os links e procurar o que lhe corresponde, atribuindo a classe ao li seu antecessor:

$('.nav li a').each(function () {
    if (~this.href.indexOf(parteURL)) $(this).closest('li').addClass('active'));
});
0

Pra fazer no rails:

<li <%="class='active'" if current_page?(sobre_path) %>>
  <%= link_to "Sobre", sobre_path %>
</li>
1
  • Show de bola funcionou certinho! Obrigado. Commented 12/05/2014 às 23:31

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .