Onclick Change Link State to bold

by Hiroshi on 06-10-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.

Related Posts

Share it!
  • Print
  • Digg
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • email
  • LinkedIn
  • Live
  • MySpace
  • Netvibes
  • PDF
  • Reddit
  • Slashdot
  • StumbleUpon
  • Technorati
  • Tumblr
  • Twitter
  • Yahoo! Bookmarks
  • Yahoo! Buzz
  • Add to favorites
  • Share/Bookmark

Post a Comment

Comment will appear here after approval, Thanks for patience