how to leave my button on the menu marked?

Question

how to leave my button on the menu marked?

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

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

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>

javascript css

asked by anonymous 28.01.2018 / 11:02

2 answers

How do I change the color of the iontabs? Uploading multiple images with Multer

score 1 · Answer 1

Here's what you're looking for in a working 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>

I put the hrefs with value # only at the time you click do not change page.

What I did was put a onclick in the links that call the function cor .

and in the 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

score 1 · Answer 2

For your example to work in live snippet you just need to cancel the 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 statement that assigns the white to the selected element is:

this.style.background = "white";

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

If attaching a function handler to an element using addEventListener (), the value of this inside the handler is a reference 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 where you are directly from url :

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

Then I would put all of them 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";