JavaScript: Destacar item do menu ao clicar
Estarei disponibilizando um script para destacar um item do menu. Quando clicar no item a cor será alterada e permanecerá até que você clique em outro.
Basta copiar todo o código abaixo e implementar em seus projeto.
<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> |
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.
Já experimentei com .htm e com .php e não funfa de jeito de nenhum. Onde está o erro? Grato.
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.
Tiago, e haveria forma de ficar salvo a opção referente a pagina carregada, mesmo com o load?
muito bom parceiro… tava querendo reduzi meu js o maximo e isso foi a melhor opcao que tive!
Muito bom esse script ajudou muito em minha aplicação.
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)
Olá Tamires,
foi criado um post para esclarecer a sua dúvida.
Veja neste link.
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..
Valeu! Obrigado.
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.
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:
Tiago muito obrigado, esse código me ajudou muito valeu!!
Abraço.
Olá,
Esse código gostei muito mas quando visualizo no modo dinâmico a cor do menu muda, e quando visualizo no navegador não muda.
O que pode ser feito?
Tiago tudo bem?
Então, eu implantei e funcionou belezinha… Estou usando em um site Onepage. Mas como eu faço para o menu ficar ativo conforme passa da sessão do site ancorado? Eu queria que ele fosse habilitando sozinho…
Obrigado abrs
Olá. Testei o script, mas a cor do link retorna ao original antes de dar próximo click. Ou seja, não segura até que outro link seja clicado. Como resolver?
Muito bom o código, teria uma maneira de direcionar a página para outra? por ex: clicar em fotos, e ir para fotos e e manter o link fotos selecionado e desabilitado?