JavaScript: Destacar item do menu ao clicar


Estarei disponibilizando um script para destacar um item de um menu.

Quando você clicar num item a sua cor será mudada e permanecerá até que você clique em outro item.

Basta copiar todo o código abaixo e implementar em seus sites.

<html>
<head>
 <script>   
   function mostrarAtivo(tag){
   var tag_li = document.getElementById('lista_menu');
   var tag_a = tag_li.getElementsByTagName('a');
   for (i=0; i<tag_a.length; i++ )
   {
      tag_a[i].style.color = "";
   }
      tag.style.color = "#ff0000";
   }
</script>
</head>
<body>
<ul id="lista_menu">
   <li><a href="#" onclick="mostrarAtivo(this);">Home</a></li>
   <li><a href="#" onclick="mostrarAtivo(this);">Fotos</a></li>
   <li><a href="#" onclick="mostrarAtivo(this);">Agenda</a></li>
   <li><a href="#" onclick="mostrarAtivo(this);">Contato</a></li>
</ul>
</body>
</html>

12 comentários em “JavaScript: Destacar item do menu ao clicar

  • 17 de março de 2011 em 1:20
    Permalink

    Muito obrigado pela dica com o script acima. Tava quebrando a cabeça pra fazer isso de forma simples sem ter que usar PHP.

    Muito obrigado.

    Sérgio.

    Resposta
  • 8 de dezembro de 2011 em 12:51
    Permalink

    Já experimentei com .htm e com .php e não funfa de jeito de nenhum. Onde está o erro? Grato.

    Resposta
    • 8 de dezembro de 2011 em 16:36
      Permalink

      Fala Joao,

      o que acontece é que as páginas não podem ser chamadas da forma como vc colocou.

      Quando clica no link a página é recarregada e o destaque do link some.

      Este tipo de efeito é ideal para páginas que são carregadas num iframe ou via função load() do jquery.

      Resposta
  • 4 de julho de 2012 em 18:14
    Permalink

    muito bom parceiro… tava querendo reduzi meu js o maximo e isso foi a melhor opcao que tive!

    Resposta
  • 14 de outubro de 2012 em 11:30
    Permalink

    Olá, ótimo código, está funcionando perfeitamente. Mas eu queria faz isso com o fundo e deixar a cor da fonte do mesmo jeito. Eu não sei usar JavaScript, como eu faço pra carregar a imagem de fundo do botão quando clicar? (deu pra entender? xD)

    Resposta
  • 10 de dezembro de 2013 em 5:38
    Permalink

    ola, abrigado por compartilhar, estou trabalhando em um site one-page, e eu já tinha testado várias maneiras diferentes, mais essa foi a única que funcionou, justamente por só funcionar se a página não precisar ser atualizada..

    Resposta
  • 22 de agosto de 2015 em 14:10
    Permalink

    Seu código é ótimo, mas gostaria de saber como faz para o menu ficar na horizontal, com a font-size no tamanho 18px e espaço entre elas de 8px.

    Obrigado.

    Resposta
    • 22 de agosto de 2015 em 19:56
      Permalink

      Fala Jadiel.

      Pra deixar o menu como você quer, o ajuste deve ser feito no css.

      Segue um exemplo – copia este código dentro da tag head:

      <style type="text/css">
          body{ font-family: "Helvetica Neue", sans-serif }
          a{ text-decoration: none }
          a:hover{ text-decoration: underline }
       
          ul#lista_menu li{
             float: left;
             display: inline;
          }
          ul#lista_menu li a{
             font-size: 18px;
             padding: 8px;
          }
      </style>
      Resposta
  • 23 de agosto de 2015 em 9:38
    Permalink

    Tiago muito obrigado, esse código me ajudou muito valeu!!

    Abraço.

    Resposta

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *