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>

5 thoughts on “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
  • 8 de agosto de 2016 em 17:55
    Permalink

    Thiago, Boa noite!!

    Como faço para o menu abaixo mudar de cor quando clicado?

    CSS.ESTILOS
    .menu {
    z-index:2;
    width:1000px;
    height:80px;
    display:inline;
    float:right;
    margin-left:auto;
    margin-top:20px;
    position:relative;
    text-align:center;
    background-color:#F4FFFF;
    }
    .BarraMenu a {
    font-family:Tahoma, Geneva, sans-serif;
    font-size:18px;
    color:#004080;
    text-decoration: none;
    text-align: center;
    padding: 8px;
    }
    .BarraMenu a:hover {
    color:#F00;
    }

    Home
    Quem Somos
    Notícias
    Localização
    Contato

    Resposta
  • 15 de novembro de 2022 em 19:37
    Permalink

    Olá Tiago,
    Tentei usar o código acima “destacar item de menu”, usando a tag tr e a td, para fazer funcionar em uma lista de clientes usando o button na linha da lista da , mas não deu certo.
    Tem como colocar um exemplo, fazendo um favor.

    Resposta

Deixe um comentário

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