First, give all your links a unique id and make a css class called active:
<ul>
<li><a id="link1" href="#/...">link 1</a></li>
<li><a id="link2" href="#/...">link 2</a></li>
</ul>
CSS:
.active {
font-weight: bold;
}
Jquery version:
function setActiveLink(setActive){
if ($("a").hasClass('active'))
$("a").removeClass('active');
if (setActive)
$("#"+setActive).addClass('active');
}
$(function() {
$("a").click(function() {
setActiveLink(this.id);
});
});
Vanilla javascript version:
In order to prevent selecting too many links with document.querySelectorAll, give the parent element an id called menuLinks. Add an onClick handler on the links.
<ul id="menuLinks">
<li><a id="link1" href="#/..." onClick="setActiveLink(this.id);">link 1</a></li>
<li><a id="link2" href="#/..." onClick="setActiveLink(this.id);">link 2</a></li>
</ul>
Code:
function setActiveLink(setActive){
var links = document.querySelectorAll("#menuLinks a");
Array.prototype.map.call(links, function(e) {
e.className = "";
if (e.id == setActive)
e.className = "active";
})
}