JavaScript: Destacar item do menu ao clicar (cor de fundo)

Este post tem uma pequena alteração em relação a outro já publicado.

O item de menu que ficará em destaque, terá a cor de fundo e a cor de fonte alterada.

<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.backgroundColor = "";
    tag_a[i].style.color = "";
  }
  tag.style.backgroundColor = "#ff0000"; // altera o fundo
  tag.style.color = "#ffffff"; // altera a cor
}
</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>

3 comentários em “JavaScript: Destacar item do menu ao clicar (cor de fundo)

  • 29 de maio de 2013 em 20:54
    Permalink

    Gostaria de saber como faço para puxar a imagens no lugar de numero exadecimal??

    ficando assim??

    }
    tag.style.backgroundColor = “#ff0000 imagens/menu_ativo.png”; // altera o fundo
    tag.style.color = “#ffffff”; // altera a cor
    }

    Resposta
    • 4 de junho de 2013 em 9:32
      Permalink

      Olá Adriano.

      Faça assim:

      tag.style.backgroundImage=”url(‘imagens/menu_ativo.png’)”;

      Resposta
  • 11 de dezembro de 2015 em 18:51
    Permalink

    Olá, estou usando este código com backgroundImage como no comentário do Tiago. Mas como faço um menu onde posso selecionar a imagem que irá substituir no backgroundImage?

    http://jsfiddle.net/ey8mxj6t/8/

    Grato!!

    Resposta

Deixe uma resposta

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