how do I leave my button in the marked menu?

Question

When I click a button I want it to be marked white, if I click another uncheck the old and leave the new marked

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>

Answer 1

For your example to work on live snippet just need to cancel page navigation action with event.preventDefault()

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

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

function configMenu(event /*<--evento é recebido aqui*/ ){
    for(var i = 0; i < menu.length; i++){
	menu[i].style.background = "#469c17";
    }
    this.style.background = "white";
    event.preventDefault(); //<---cancelar a navegação de página
}

#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>

The instruction that assigns the white color to the selected element is:

this.style.background = "white";

And it works because inside a eventListener the this refers to the clicked element, as the documentation itself specifies:

If Attaching a Handler Function to an element using addeventlistener(), the value of this Inside the Handler is a Ference to the element.

---

If on the other hand you have several different pages for chat, post, calendar and files then you need to interpret which page you are on and just change the color on that page.

You could get the name of the page you’re directly on url:

let paginaAtual = window.location.pathname.split("/").pop();

Then I would put everyone in the normal color and the current page in white:

const menu = document.querySelectorAll("#menu > ul > li > a");
for(let i = 0; i < menu.length; i++){
    menu[i].style.background = "#469c17";
}

const linkAtual = document.querySelector("#menu > ul > li > a[href=" + paginaAtual +"]");
linkAtual.style.background = "white";

Answer 2

Here’s what you look for in a functional example:

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";
}


function cor(){

var a = document.getElementsByTagName("A");

for(var i = 0; i < a.length; i++){
		a[i].style.backgroundColor = "#469c17";
}



}

#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 onclick='cor()' href="#">Todos Posts</a></li>
				<li id="chat_menu"><a href="#" onclick='cor()'>Chat</a></li>
				<li id="agenda_menu"><a href="#"  onclick='cor()'>Agenda</a></li>
				<li id="arquivo_menu"><a href="#"  onclick='cor()'>Arquivos</a></li>
			</ul>
</div>

put the hrefs worthwhile # only stops when you click not to change page.

what I did was put a onclick us links who call the function cor.

and in function:

function cor(){

    var a = document.getElementsByTagName("A");

    for(var i = 0; i < a.length; i++){
            a[i].style.backgroundColor = "#469c17";
    }

}

and solve your problem