Skip to main content
2 de 2
tags editadas
Roberto de Campos
  • 5,3mil
  • 2
  • 21
  • 33

como deixar meu botão no menu marcado?

Quando eu clicar em um botão quero que ele fique marcado de branco, se eu clicar em outro desmarque o antigo e deixe marcada o novo

var menu = document.querySelectorAll("#menu > ul > li > a");

for(var i = 0; i < menu.length; i++){
    menu[i].addEventListener("click", configMenu);
}

function configMenu(){
    for(var i = 0; i < menu.length; i++){
        menu[i].style.background = "#469c17";
    }
    this.style.background = "white";
}
#menu{
    width: 100%;
    height: 36px;
    background-color: #469c17;
}
#posts_menu{
    margin-left: 39px;
}
#posts_menu, #chat_menu, #agenda_menu, #arquivo_menu{
    line-height: 36px;
    float: left;
    list-style: none;
}
#posts_menu a, #chat_menu a, #agenda_menu a, #arquivo_menu a{
    display: block;
    width: 100px;
    text-align: center;
    background-color: #469c17;
    text-decoration: none;
    color: black;
}
#posts_menu a:hover, #chat_menu a:hover, #agenda_menu a:hover, #arquivo_menu a:hover{
    background-color: white;

}
<div id="menu">
            <ul>
                <li id="posts_menu"><a href="post">Todos Posts</a></li>
                <li id="chat_menu"><a href="chat">Chat</a></li>
                <li id="agenda_menu"><a href="#">Agenda</a></li>
                <li id="arquivo_menu"><a href="arquivos">Arquivos</a></li>
            </ul>
</div>

AKU
  • 501
  • 5
  • 16