How to highlight a menu item when clicking Back or Next

Question

This is possible, I know I am on the way, but before I decided to see with the community what can be done in this case, and then take the right course.

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>

   

You have all the 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 just need to read the id minus/plus to know which direction to go.

In practice it is necessary to give the movement to these buttons in a way that is selected one menu item at a time, as each click

See an example - Header Pagination

Detail

I need Examples in a simple language without: Apis, DOM4 and Ecmascript 5

Not widely compatible with several browsers(obsolete)

Answer 1

You can do it like this, 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>