1

Estou com o problema no meu JS ele esta adicionando a classe Current para todas as #li.

html

<ul id="navlist">
    <li id="home"><a href="/">Home</a></li>
    <li id="sobre"><a href="/sobre">Sobre</a>
    </li>
</ul>

jquery

alert(window.location.pathname);
$("#navlist li").each(function(){
    if($(this).attr("href")==window.location.pathname)
        $(this).addClass("current");
});

3 Respostas 3

3

Faça a seguinte alteração, não estava dando certo porque na tag <li> não existe o atributo href e com o .children() ele pega o elemento filho que nesse caso seria o <a> que possui o atributo href

alert(window.location.pathname);
$("#navlist li").each(function(){
    if($(this).children().attr("href")==window.location.pathname)
        $(this).addClass("current");
});
1
  • 2
    Valeu pela ajuda Commented 26/03/2015 às 13:55
1

Para esse if precisas de saber o href do link / ancora. Assim no teu seletor falta o ultimo passo que é dentro de cada <li> ir procurar a ancora <a> e adicionar uma classe.

Para isso podes usar o .find() que aceita um seletor CSS e procura nos descendentes do elemento inicial retornando o primeiro elemento que encontrar. Depois só tens de adicionar a classe ao elemento certo (li ou a consoante queiras).

$("#navlist li").each(function(){
    var $ancora = $(this).find('a');
    if($ancora.attr("href") == window.location.pathname){
        $(this).addClass("current");
        // ou $ancora.addClass("current"); se a classe fôr para adicionar ao link
    }
});
0
1

Já foram citadas ótimas soluções, mesmo assim segue abaixo minha contribuição.

Uma maneira interessante de resolver isso seria utilizar um Attribute Contains Selector Um Seletor um pouco mais especifico.

 $("#navlist li a[href='"+window.location.pathname+"']").parent().addClass("current");

NOTA: Conforme o discutido @Sergio e eu concluímos que o desenvolvedor ao utilizar esta solução deve atentar-se a não escrever URLs absolutas nos href pois se tornariam incompatíveis com window.location.pathname

0

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 .