kevmeister Posted November 16, 2006 Share Posted November 16, 2006 Hello people.I have a question about the OnClick event feature.I have 3 links on my webpage. Each simply changes the target "Centre" frame to a different document. In my left pane I have the list of pages as links.How do I Bold the link when it is clicked (I think I already worked out how to do this)But my problem is when I click link number 2, I then want link number 1 (or link 3) to then be "unbolded" and for link 2 to then be "bolded".Can anyone shed help me pleaseMany ThanksKev Link to comment Share on other sites More sharing options...
aspnetguy Posted November 16, 2006 Share Posted November 16, 2006 try this <html><head> <title>Bolded Links OnClick</title> <script type="text/javascript"> onload = init; var links; function init() { var container = document.getElementById('links'); links = container.getElementsByTagName('a'); for(var i=0;i<links.length;i++) { links[i].onclick = function(){boldLink(this);} } } function boldLink(link) { for(var i=0;i<links.length;i++) { links[i].style.fontWeight = 'normal'; } link.style.fontWeight = 'bold'; } </script></head><body> <div id="links"> <a href="#">Link 1</a><br/> <a href="#">Link 2</a><br/> <a href="#">Link 3</a><br/> <a href="#">Link 4</a><br/> <a href="#">Link 5</a><br/> <a href="#">Link 6</a><br/> </div></body></html> Link to comment Share on other sites More sharing options...
kevmeister Posted November 17, 2006 Author Share Posted November 17, 2006 WOW,That works absolutely perfect, just as I wanted it.You are a Legend Many Many ThanksKev try this<html><head> <title>Bolded Links OnClick</title> <script type="text/javascript"> onload = init; var links; function init() { var container = document.getElementById('links'); links = container.getElementsByTagName('a'); for(var i=0;i<links.length;i++) { links[i].onclick = function(){boldLink(this);} } } function boldLink(link) { for(var i=0;i<links.length;i++) { links[i].style.fontWeight = 'normal'; } link.style.fontWeight = 'bold'; } </script></head><body> <div id="links"> <a href="#">Link 1</a><br/> <a href="#">Link 2</a><br/> <a href="#">Link 3</a><br/> <a href="#">Link 4</a><br/> <a href="#">Link 5</a><br/> <a href="#">Link 6</a><br/> </div></body></html> Link to comment Share on other sites More sharing options...
holmedwa04 Posted November 18, 2006 Share Posted November 18, 2006 I don't know where I would be if it wasn't for W3School, because 9 times out of 10 you guys come up with an answer that is virtually always correct and works. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now