0

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>

2 Respostas 2

2

Para que o seu exemplo fique a funcionar no live snippet apenas precisa de cancelar a ação de navegação de página com 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>

A instrução que lhe atribui a cor branca ao elemento selecionado é:

this.style.background = "white";

E funciona porque dentro de um eventListener o this refere o elemento clicado, como a própria documentação especifica:

If attaching a handler function to an element using addEventListener(), the value of this inside the handler is a reference to the element.


Se em contrapartida tiver várias páginas diferentes para chat, post, agenda e arquivos então precisa de interpretar em que página está e apenas mudar a cor nessa página.

Poderia obter o nome da página em que está diretamente pelo url:

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

Depois colocaria todos com a cor normal e o da pagina corrente a branco:

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

Eis o que você busca em um exemplo funcional:

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>

coloquei os hrefs com valor # somente para na hora que você clicar não mudar de pagina.

o que eu fiz foi colocar um onclick nos links que chamam a função cor.

e na função:

function cor(){

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

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

}

e resolve teu problema

5
  • Tem dois ID's nas tags. Tente dar uma breve explicação do que foi alterado e como você resolveu o problema
    – Phelipe
    Commented 28/01/2018 às 11:53
  • @Phelipe estou fazendo isso :D, mas que dois idS? Commented 28/01/2018 às 11:56
  • Tinha dois ID's, mas já retirou.
    – Phelipe
    Commented 28/01/2018 às 12:04
  • Julio mas se eu coloco o link (meu site esta em mvc) ele atualiza a pagina e nao aparece!! so funciona com #
    – AKU
    Commented 28/01/2018 às 21:53
  • @AKU esta utilizando alguma linguagem back-end? pois nesse caso seria interessante colocar ou nao a classe ativa se estiver na pagina correspondente ao link Commented 29/01/2018 às 11:57

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .