Onclick Change Link State to bold

by on October 6th, 2007

If you need to change the state of link onclick event to blod in navigation then we will use following code.

<html>
<head>
<title>Change Links State On Click</title>
<style type="text/css">
.activate { font-weight: bold; }
</style>
</head>
<body>
<a href="#" id="link1" onclick="changeActiveStates(this)">Link A</a>
<a href="#" id="link2" onclick="changeActiveStates(this)">Link B</a>
<a href="#" id="link3" onclick="changeActiveStates(this)">Link C</a>
<script type="text/javascript">
function byId(id) {
return document.getElementById ? document.getElementById(id) : document.all[id];
}
var prevLink = "";
function changeActiveStates(ele) {
if (prevLink) byId(prevLink).className = "";
ele.className = 'activate';
prevLink = ele.id;
}
</script>
</body>
</html>

This will cause the link to appear bold when clicked and when you click another link then previous clicked link will be normal and active link will be bold.


Share