Edit in JSFiddle

JavaScript
HTML
CSS
Result

function button_()
{
	"use strict";
	var buttonObjects=document.getElementsByClassName('button');
	var menu1_button=buttonObjects[0];
	var buttonHistroy=menu1_button;
	
	menu1_button.className = 'button selected';	
	
	for(var i=0; i<buttonObjects.length; ++i){
		buttonObjects[i].onclick = function(){
			buttonHistroy.className = 'button';
			this.className = 'button selected';
			buttonHistroy = this;
		};
	}
}

function main()
{
	"use strict";
	button_();	
}

main();

<body>
<a href="#" class="button">menu1</a>
<a href="#" class="button">menu2</a>
<a href="#" class="button">menu3</a>
<a href="#" class="button">menu4</a>
<a href="#" class="button">menu5</a>
<a href="#" class="button">menu6</a>
<a href="#" class="button">menu7</a>
<a href="#" class="button">menu8</a>
<a href="#" class="button">menu9</a>
</body>

a.button{
    display: inline-block;
    padding: 0 10px;
    text-align: center;
    height: 40px;
    line-height: 40px;
    background: #666;
    color: #fff;
    box-sizing: border-box;
    text-decoration: none;
    border: none;
}

a.button:hover{
    background: #999;
}

a.button.selected{
    background: #000;
}