1

Tenho uma lista contendo "URLs" para outras páginas, estou com dificuldade para pegar a URL da página atual e verificar se o pathname extraído consta na minha lista de URLs, caso exista devo adicionar a classe 'active' ao li que envolve o link.

Segue lista mencionada acima:

<ul class='nav navbar-nav navbar-right menuHover'>
    <li>
        <a href='/'>
            <span>
                Página Inicial
            </span>
        </a>
    </li>
    <li class='dropdown'>
        <a href='/cursos'>
            <span>
                Cursos
            </span>
        </a>
    </li>
    <li>
        <a href='contact3.html'>
            <span>
                Contato
            </span>
        </a>
    </li>
</ul>

O código abaixo pega o pathname da URL:

$(document).ready(function() {
    $(location).attr('href');
    var pathname = window.location.pathname.replace('#', '');
    alert(pathname);
});
1
  • Qual linguagem Server-Side está usando ? Commented 13/09/2016 às 11:54

2 Respostas 2

2

Veja abaixo um exemplo funcionando para a url do snippets deste site (http://stacksnippets.net/js)

$(document).ready(function() {
    
    var pathname = location.pathname.replace('#', ''); 

    
    $('.nav a').each(function(){
      if($(this).attr('href') == pathname){
        $(this).addClass('active');
        return false;
      }
    });
    
});
.active{
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class='nav navbar-nav navbar-right menuHover'>
    <li>
        <a href='/'>
            <span>
                Página Inicial
            </span>
        </a>
    </li>
    <li class='dropdown'>
        <a href='/cursos'>
            <span>
                Cursos
            </span>
        </a>
    </li>
    <li>
        <a href='contact3.html'>
            <span>
                Contato
            </span>
        </a>
    </li>
  <li>
        <a href='/js'>
            <span>
                Javascript
            </span>
        </a>
    </li>
</ul>

5
  • Dava para você ter quebrado o loop do jQuery
    – user37626
    Commented 13/09/2016 às 12:02
  • @nicematt, como assim "quebrado o loop"? Commented 13/09/2016 às 12:26
  • Você sabe, certo? jQuery.fn.each pode ser quebrado retornando exatamente false no callback do loop. Você poderia ter quebrado o loop no bloco do if, já que não tem necessidade de percorrer os próximos li's novamente. E seu código também pode ser problemático se um link dos li's não tiver um '/' no começo, pois as comparações podem falhar contra location.href. E esse é o caso da pergunta, lá tem li's que não tem '/' no começo de seus próprios links.
    – user37626
    Commented 13/09/2016 às 13:12
  • @nicematt, Verdade... não tinha pensado em evitar que ele percorra os itens desnecessários. Commented 13/09/2016 às 13:15
  • Sobre o '/' dos diretórios você pode checar na minha resposta para ter uma ideia básica
    – user37626
    Commented 13/09/2016 às 13:38
2

Você só precisa atravessar cada li (Oops! a) até achar algum deles que contém um href igual ao location.pathname. Portanto, há uma forma melhor de fazer isso se você re-interpretar o href de cada li, transformando-o em uma nova instância de Location.

E por que adicionar um '/' no começo de cada diretório? Porque a comparação de cada diretório contra o diretório de location.href poderia falhar se não eu adicionasse, por exemplo, se tal diretório fosse igual à location.href, sua comparação ainda falharia se não tivesse um '/' no começo, assim como location.href poderia ter.

(location.href.pathname = "/dir";

(this.pathname = "dir")

(location.href.pathname = "/dir") === (this.pathname = "dir")
// false

Para saber se o diretório não contém um '/' no começo, basta uma condição como essa: pathname.charAt(0) !== '/', desde que o diretório é uma String... ;]

$(document).ready(function() {
    var pathname = location.pathname.charAt(0) !== '/' ? 
                        location.pathname = '/' + location.pathname :
                        location.pathname

    $('.navbar-nav a').each(function() {
        var link = document.createElement('a')
        link.href = this.href
        if ((link.pathname.charAt(0) !== '/' ?
                        href = '/' + href :
                        href) === pathname) {
            $(this).addClass('active')
            return false
        }
    });
});

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 .