How to highlight a menu item by clicking Back or Next

Question

How to highlight a menu item by clicking Back or Next

Navigation

#1 by (2 votes)

3

This is possible, I know I'm on the way, but before I decide to see with the community what can be done in this case, and then take the right direction.

Code

function Selecionado(tag){
var item = document.getElementById('menu');

var link = item.getElementsByTagName('a');

for ( var i = 0; i < link.length; i++ ){

	link[i].style.backgroundColor = "";
	link[i].style.color = "";
}
  	tag.style.backgroundColor = "#ff0000"; // Cor de fundo do link
  	tag.style.color = "#ffffff"; // Cor atual do link
}

* { margin: 0; padding: 0; list-style: none; }

button { float: left }

#menu li {
	float: left;
	margin: 5 10px;
	position: relative;
}

a {
  cursor: pointer; padding: 3px; text-decoration: none; color: #111;
}
a.ativo {
  font-weight: bolder;
  background-color: #333;
  color: #fff;
}

<button id="menos">&#171 Voltar</button>

<ul id="menu">
   <li><a onclick="Selecionado(this);">1</a></li>
   <li><a onclick="Selecionado(this);">2</a></li>
   <li><a onclick="Selecionado(this);">3</a></li>
   <li><a onclick="Selecionado(this);">4</a></li>
   <li><a onclick="Selecionado(this);">5</a></li>
</ul>

<button id="mais">Avançar &#187</button>

It has the whole logic in one function and the menu item that will be highlighted, will have its font color changed as well as the background

For this, I only need to read the id less / more to know what direction to take.

In practice you need to give these buttons motion in a way that one menu item is selected at a time, as each click

See an example - Page Header

Detail

I need examples in simple language without APIs, DOM4 and ECMAScript 5

They are not extensively compatible with various browsers (obsolete)

javascript html css

asked by anonymous 17.06.2016 / 08:50

1 answer

Is it possible to return the child class through a method in the parent class? Problem with mask on form

score 2 · Accepted Answer

You can do this, you use the function muda(num) , which receives 1 or -1.

var id;
function Selecionado(tag,thisid){
  id=thisid;
var item = document.getElementById('menu');

var link = item.getElementsByTagName('a');

for ( var i = 0; i < link.length; i++ ){

	link[i].style.backgroundColor = "";
	link[i].style.color = "";
}
  	tag.style.backgroundColor = "#ff0000"; // Cor de fundo do link
  	tag.style.color = "#ffffff"; // Cor atual do link
}


function muda(num){
  id+=num;
  var item = document.getElementById('menu');

var link = item.getElementsByTagName('a');

for ( var i = 0; i < link.length; i++ ){

	link[i].style.backgroundColor = "";
	link[i].style.color = "";
}
  
  document.getElementById(id).style.backgroundColor = "#ff0000"; // Cor de fundo do link
  document.getElementById(id).style.color = "#ffffff"; // Cor atual do link
}

<button id="menos" onclick="muda(-1);">&#171 Voltar</button>

<ul id="menu">
   <li><a onclick="Selecionado(this,1);" id="1">1</a></li>
   <li><a onclick="Selecionado(this,2);" id="2">2</a></li>
   <li><a onclick="Selecionado(this,3);" id="3">3</a></li>
   <li><a onclick="Selecionado(this,4);" id="4">4</a></li>
   <li><a onclick="Selecionado(this,5);" id="5">5</a></li>
</ul>

<button id="mais" onclick="muda(1);">Avançar &#187</button>