Jump to content

Setting Links Active


webstyles
 Share

Recommended Posts

Hi Could anyone offer some help with a java script for my site.i want to let the link change colour when clicked on and be the active link. until another link is selected.but i cannot see what i have to change in the script

<script type="text/javascript">		function setActive(pageName)		{			var bannerA = document.getElementsByTagName("a");			for(var i = 0; i < bannerA.length; i++)			{				var firstIndex = bannerA[i].href.lastIndexOf('/') + 1;				var lastIndex = bannerA[i].href.length;				var bannerAHref = bannerA[i].href.substring(firstIndex, lastIndex);				if(bannerAHref == pageName) //If this is the current page, set it to red				{					bannerA[i].setAttribute("class", "active"); //For firefox and others					bannerA[i].setAttribute("className", "active"); //For IE				}			}			setInactive(pageName);		}				function setInactive(pageName)		{			var bannerA = document.getElementsByTagName("a");			for(var i = 0; i < bannerA.length; i++)			{				var firstIndex = bannerA[i].href.lastIndexOf('/') + 1;				var lastIndex = bannerA[i].href.length;				var bannerAHref = bannerA[i].href.substring(firstIndex, lastIndex);				if(bannerAHref != pageName) //For all pages that are not the current page, set them to normal				{					bannerA[i].setAttribute("class", "link");					bannerA[i].setAttribute("className", "link");				}			}		}	</script>

thanks in advance

Link to comment
Share on other sites

Your code looks over complicated for such an easy task, but as you have not supplied htm or link to page we can't truly get an idea of what you trying to achieve?this is a simple code to highlight current page link

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/window.onload=function(){var currentPage = document.location.href;var link_parent = document.getElementById("link_wrapper");var anchor_childs = link_parent.getElementsByTagName("a");for(i=0;i<anchor_childs.length;i++){anchor_childs[i].href==currentPage ? anchor_childs[i].className="active" : anchor_childs[i].removeAttribute("className");}}/*--*//*]]>*/</script><style type="text/css">.active{color:#FF0033;}</style></head><body><div id="link_wrapper"><a href="/">home</a><a href="otherone.htm">otherone</a><a href="othertwo.htm">othertwo</a></div></body></html>

the javascript code, css, should placed in, and linked to a external js file.

Edited by dsonesuk
Link to comment
Share on other sites

Sorry here is the full page code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head>	<meta http-equiv="content-type" content="text/html; charset=UTF-8">	<link rel="stylesheet" type="text/css" href="styles.css">	<title>	The Hungarian-South African Chamber Of Commerce	</title>	<script type="text/javascript">		function setActive(pageName)		{			var bannerA = document.getElementsByTagName("a");			for(var i = 0; i < bannerA.length; i++)			{				var firstIndex = bannerA[i].href.lastIndexOf('/') + 1;				var lastIndex = bannerA[i].href.length;				var bannerAHref = bannerA[i].href.substring(firstIndex, lastIndex);				if(bannerAHref == pageName) //If this is the current page, set it to red				{					bannerA[i].setAttribute("class", "active"); //For firefox and others					bannerA[i].setAttribute("className", "active"); //For IE				}			}			setInactive(pageName);		}				function setInactive(pageName)		{			var bannerA = document.getElementsByTagName("a");			for(var i = 0; i < bannerA.length; i++)			{				var firstIndex = bannerA[i].href.lastIndexOf('/') + 1;				var lastIndex = bannerA[i].href.length;				var bannerAHref = bannerA[i].href.substring(firstIndex, lastIndex);				if(bannerAHref != pageName) //For all pages that are not the current page, set them to normal				{					bannerA[i].setAttribute("class", "link");					bannerA[i].setAttribute("className", "link");				}			}		}	</script></head><body>	<table class="bannerTable">		<tr>			<td>				<a href="aboutUs.html" target="contentFrame" onclick="setActive('aboutUs.html')">					About Us				</a>			</td>			<td>				<a href="boardOfDirectors.html" target="contentFrame" onclick="setActive('boardOfDirectors.html')">					Board Of Directors				</a>			</td>			<td rowspan="3">				<img class="globeImg" src="../images/globe.png" />			</td>			<td>				<a href="businessWithSA.html" target="contentFrame" onclick="setActive('businessWithSA.html')">					Doing Business With RSA				</a>			</td>			<td>				<a href="investmentsInSA.html" target="contentFrame" onclick="setActive('investmentsInSA.html')">					Invest In RSA				</a>			</td>		</tr>		<tr>			<td>				<a href="members.html" target="contentFrame" onclick="setActive('members.html')">					Members				</a>			</td>			<td>				<a href="membership.html" target="contentFrame" onclick="setActive('membership.html')">					Membership				</a>			</td>			<td>				<a href="businessWithHungary.html" target="contentFrame" onclick="setActive('businessWithHungary.html')">					Doing Business With Hungary				</a>			</td>			<td>				<a href="investmentsInHungary.html" target="contentFrame" onclick="setActive('investmentsInHungary.html')">					Invest In Hungary				</a>			</td>		</tr>		<tr>			<td>				<a href="calendar.html" target="contentFrame" onclick="setActive('calendar.html')">					Calendar Of Events				</a>			</td>			<td>				<a href="contactUs.html" target="contentFrame" onclick="setActive('contactUs.html')">					Contact Us				</a>			</td>			<td>				<a href="memberLogin.html" target="contentFrame" onclick="setActive('memberLogin.html')">					Members Login				</a>			</td>			<td>				<a href="links.html" target="contentFrame" onclick="setActive('links.html')">					Links				</a>			</td>		</tr>	</table></body></html>

Link to comment
Share on other sites

this should work, but it will make the link active even if the page is not found.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/function setActive(pageName)	{	var link_parent = document.getElementById("link_wrapper");	var anchor_childs = link_parent.getElementsByTagName("a");	for(i=0;i<anchor_childs.length;i++)		{		//alert(pageName.href+" : "+anchor_childs[i].href)		anchor_childs[i].href==pageName.href ? anchor_childs[i].className="active" : anchor_childs[i].className="link";		}	}	function assignonclick(){	var link_parent = document.getElementById("link_wrapper");	var anchor_childs = link_parent.getElementsByTagName("a");	for(i=0;i<anchor_childs.length;i++)		{		if(i>0)			{			anchor_childs[i].className="link";			}		else			{			anchor_childs[i].className="active";			}		anchor_childs[i].onclick = function(){setActive(this);};		}}		window.onload=function(){	assignonclick();}/*--*//*]]>*/</script><style type="text/css">.active{color:#FF0033;}.link{color:#666666;}</style></head><body><div></div><table id="link_wrapper" class="bannerTable">		<tr>			<td>				<a href="aboutUs.html" target="contentFrame">					About Us				</a>			</td>			<td>				<a href="boardOfDirectors.html" target="contentFrame">					Board Of Directors				</a>			</td>			<td rowspan="3">				<img class="globeImg" src="../images/globe.png" />			</td>			<td>				<a href="businessWithSA.html" target="contentFrame">					Doing Business With RSA				</a>			</td>			<td>				<a href="investmentsInSA.html" target="contentFrame">					Invest In RSA				</a>			</td>		</tr>		<tr>			<td>				<a href="members.html" target="contentFrame">					Members				</a>			</td>			<td>				<a href="membership.html" target="contentFrame">					Membership				</a>			</td>			<td>				<a href="businessWithHungary.html" target="contentFrame">					Doing Business With Hungary				</a>			</td>			<td>				<a href="investmentsInHungary.html" target="contentFrame">					Invest In Hungary				</a>			</td>		</tr>		<tr>			<td>				<a href="calendar.html" target="contentFrame">					Calendar Of Events				</a>			</td>			<td>				<a href="contactUs.html" target="contentFrame">					Contact Us				</a>			</td>			<td>				<a href="memberLogin.html" target="contentFrame">					Members Login				</a>			</td>			<td>				<a href="links.html" target="contentFrame">					Links				</a>			</td>		</tr></table></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...