Jump to content

OnClick Events


kevmeister
 Share

Recommended Posts

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

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...