0

cansei de sempre alterar a navbar de todas as minhas páginas, e resolvi criar um arquivo pra navbar e sempre dar um include nas páginas para ser mais fácil a adição/remoção de itens!

Só que, minha dúvida é se tem como fazer um sistema em PHP ou JavaScript que possa identificar a página para setar a classe 'active' no <li> da navbar correspondente a página atual!

O código da NavBar é o seguinte:

<div class="container">

<nav class="navbar navbar-inverse">

  <div class="container-fluid">

    <div class="navbar-header">

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">

        <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-2">

      <ul class="nav navbar-nav">

        <li class="active clash"><a href="/">Início</a></li>

        <li class="clash"><a href="/ferramentas/gerador-de-emblema">Gerador de Emblemas</a></li>

      </ul>

      <ul class="nav navbar-nav navbar-right">

      </ul>

    </div>

  </div>

</nav>

</div>

Por exemplo, estou na página HOME! Digamos que o id da body é "1". Um script poderia capturar esse id e atribuir a classe active para a <li> com a id "1"!

1 Resposta 1

1

Uma opção simples e eficaz é comparar o retorno da url com o valor do href em seu menu de navegação, aplicando a classe no elemento quando a condição fosse satisfeita.

Solução em PHP(comparando url com href)

<?php $paginaLink = $_SERVER['SCRIPT_NAME'];?>
<li>
  <a href="/blog/"
  <?php 
    if($paginaLink == '/blog/index.php') {echo 'class="ativo"';}
  ?>>
  Blog</a>
</li>

Essa não é das minhas soluções preferidas porque acaba sujando um pouco o HTML do menu, mas é bem simples e eficaz.

Solução em JQuery(Comparando atributos)
Aproveitando sua linha de raciocínio, você também pode solucionar seu problema usando JQuery comparando por exemplo se o valor da propriedade name do <body> de sua página é igual ao valor da propriedade name de cada <li> do menu de navegação.

$("nav ul li").each(function() {
  var page_name = $("body").attr("name");
  var menu_name = $(this).attr("name");
  if(page_name == menu_name){
    $(this).addClass("active");
    return false;  
    // retornando false vc evita que o loop continue iterando,
    // supondo que seu menu não precise de 2 itens com classe ativa
  }
});
4
  • cara, não sei porque, mas descartei totalmente a opção .val() da minha mente por isso fiquei sem ideias kkkk, vou tentar essa com jquery! 20/10/2016 às 10:07
  • 1
    verdade mano, o .val() não funciona com attr()! Removi os .val() e deu certo, funcionou perfeitamente! 20/10/2016 às 10:24
  • Eu nem testei, se tivesse testado, tinha notado isso, .val() removido! 20/10/2016 às 12:40
  • Acho que JavaScript é a melhor opção, eu pensei em PHP para fazer algum tipo de classe ou sla, nunca mexi com classes! 20/10/2016 às 12:41

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 .